整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          vue3多頁(yè)面運(yùn)行與打包

          現(xiàn)實(shí)應(yīng)用環(huán)境,會(huì)有使用vue開(kāi)發(fā)多頁(yè)面環(huán)境的需求,這些頁(yè)面擁有共同的依賴,但是卻又都是獨(dú)立的,為了實(shí)現(xiàn)vue的多頁(yè)面打包,可以使用webpack,同時(shí)又因?yàn)関ue-cli自帶了webpack,所以我們還可以采用vue-cli本身的配置文件進(jìn)行多頁(yè)打包操作。

          VUE3多頁(yè)面打包

          方式一:webpack配置

          webpack安裝參考:[安裝 | webpack 中文網(wǎng)]。

          直接在package.json同級(jí)目錄下創(chuàng)建webpack.config.js(創(chuàng)建一個(gè)webpack的配置文件即可),然后在配置文件內(nèi)輸入內(nèi)容:

          /**
          
          *配置
          
          * */
          
          /*path處理模塊,可有可無(wú),主要是為了方便路徑鏈接,因?yàn)樵谂渲梦募?nèi)對(duì)于參數(shù)而言只接受絕對(duì)路徑,利用path.resovle(__dirname, 相對(duì)路徑)可以自動(dòng)生成絕對(duì)路徑,此模塊為webpack自帶*/
          
          let path = require('path')
          
          /*vue-loader,vue加載插件,使用npm install vue-loader直接安裝即可
          
          *同時(shí)對(duì)于vue3而言需要單獨(dú)安裝@vue/compiler-sfc,vue2的話是vue-compiler
          
          */
          
          let vueLoader = require('vue-loader')
          
          /*html-webpack-plugin,模版處理插件,如果存在多個(gè)html模版就需要安裝
          
          *直接用npm install html-webpack-plugin
          
          */
          
          let htmlWebPackPlugin = require('html-webpack-plugin')
          
          /**
          
          *compression-webpack-plugin,這是一個(gè)可選插件,目的是為了對(duì)打包后的文件進(jìn)行壓縮,因?yàn)榇虬髸?huì)形成一個(gè)大的js文件,文件越大網(wǎng)頁(yè)打開(kāi)速度越慢。
          
          */
          
          let compressionWebpackPlugin = require('compression-webpack-plugin')
          
          module.exports = {
          
          /*打包入口,多入口就是從這里來(lái)的,當(dāng)打包時(shí),會(huì)去找到每一個(gè)入口文件,
          
          并根據(jù)這個(gè)文件依賴去打包,每一個(gè)入口寫(xiě)一個(gè)key-value對(duì)*/
          
          entry: {
          
          /*key-value格式
          
          key就是標(biāo)識(shí)名稱,之所以寫(xiě)成 "/js/index/index" 格式是為了在打包時(shí)將文件輸出到對(duì)應(yīng)目錄,
          
          默認(rèn)情況下,文件只會(huì)輸出到output所指定的目錄下,之后便沒(méi)有區(qū)分,這里用“/”分割就是利用輸出路徑時(shí)小漏洞形成目錄*/
          
          /*value是要打包入口的地址,利用path.resolve處理絕對(duì)路徑問(wèn)題*/
          
          '/js/index/index': path.resolve(__dirname, './src/entry/index.js'),
          
          '/js/index2/index2': path.resolve(__dirname, './src/entry/index2.js')
          
          },
          
          /*文件輸出目錄,只能有一個(gè),[官方要求](https://www.webpackjs.com/concepts/output/)*/
          
          output: {
          
          /*輸出的入口文件的名稱,【name】就是剛才上面我們指定的key值,這個(gè)值不能通過(guò)外部變量或數(shù)組動(dòng)態(tài)修改*/
          
          filename: '[name].js',
          
          /*輸出目錄,也需要指定絕對(duì)路徑*/
          
          path: path.resolve(__dirname, './dist')
          
          },
          
          /*插件配置與加載*/
          
          plugins: [
          
          /*加載vue文件打包插件*/
          
          new vueLoader.VueLoaderPlugin,
          
          /*html模版打包插件,有幾個(gè)入口就要用幾個(gè),書(shū)寫(xiě)順序與上方入口順序一致,
          
          如果只有一個(gè),那么所有入口都會(huì)通過(guò)這一個(gè)模版打包*/
          
          new htmlWebPackPlugin({
          
          template: path.resolve(__dirname, './public/html/index.html'),
          
          filename: 'index.html'
          
          }),
          
          new htmlWebPackPlugin({
          
          template: path.resolve(__dirname, './public/html/index2.html'),
          
          filename: 'xxjszx.html'
          
          }),
          
          /*加載壓縮插件,將test中查找到的文件類型全部壓縮,test的值對(duì)應(yīng)的是一個(gè)正則表達(dá)式*/
          
          new compressionWebpackPlugin({
          
          test: /\.js$|\.html$|\.css$|\.jpg$|\.png$/,
          
          threshold: 100000,
          
          deleteOriginalAssets: false
          
          })
          
          ],
          
          module:{
          
          /*文件處理規(guī)則*/
          
          rules: [
          
          {
          
          /*css處理規(guī)則,直接用css-loader插件默認(rèn)加載,css-loader插件也需要使用npm安裝*/
          
          test: /\.css$/,
          
          use: ['style-loader', 'css-loader']
          
          },
          
          {
          
          /*vue文件加載規(guī)則*/
          
          test: /\.vue$/,
          
          use: ['vue-loader']
          
          },
          
          {
          
          /*圖片文件處理規(guī)則,使用url-loader插件改寫(xiě)文件名并放到指定位置*/
          
          test: /\.(jp?g|png|svg|ico)$/,
          
          use: 'url-loader?limit=2048&name=./img/[hash:8].[name].[ext]'
          
          }
          
          ]
          
          }
          
          }

          方式二:vue-cli配置

          vue-cli目前已不提供vue.config.js配置文件,但是我們可以手動(dòng)在package.json同級(jí)目錄創(chuàng)建一個(gè),創(chuàng)建成功后此文件將作為優(yōu)先調(diào)用對(duì)象,結(jié)構(gòu)與內(nèi)容同webpack類似(其實(shí)就是內(nèi)置的webpack配置),可參考官網(wǎng)配置解釋:配置參考 | Vue CLI:

          module.exports = {
          
          /*pages指定入口,同樣是key-value對(duì)的形式,只不過(guò)是將配置集成到了一起*/
          
          pages: {
          
          /*名稱*/
          
          xxjszx: {
          
          /*入口,同上面的entry*/
          
          entry: 'src/entry/xxjszx.js',
          
          /*模版,同上面的html-webpack-plugin插件*/
          
          template: 'public/html/xxjszx.html',
          
          /*輸出后的文件名稱*/
          
          filename: 'xxjszx.html',
          
          },
          
          index: {
          
          entry: 'src/entry/index.js',
          
          template: 'public/html/index.html',
          
          /*這里是html輸出到的文件地址,也可以利用/斜杠表示目錄,例如index/index.html就代表創(chuàng)建index目錄并把index.html放到目錄下*/
          
          filename: 'index.html',
          
          }
          
          }
          
          }

          vue3多頁(yè)面直接運(yùn)行

          使用vue.config.js配置好后,直接使用npm run dev命令即可,對(duì)應(yīng)vue的vue-cli-service serve,運(yùn)行可根據(jù)pages定義的key值進(jìn)行路由調(diào)用頁(yè)面,key值為index那么調(diào)用格式就是/index,默認(rèn)頁(yè)面是index路由對(duì)應(yīng)頁(yè)面。如果采用webpack打包是無(wú)法直接運(yùn)行多頁(yè)面的,需要在打包后部署到服務(wù)器上。

          多數(shù)情況,我們使用webpack打包單頁(yè)面應(yīng)用,有的時(shí)候也會(huì)遇到多頁(yè)面的項(xiàng)目

          單入口配置

          一般情況下的配置模板如下:

          module.exports = {

          entry: {},

          output: {},

          module: {},

          plugins: [],

          devServer: {}

          }

          • entry:配置入口文件的地址,可以是單一入口,也可以是多入口;
          • output:配置出口文件的地址,支持多出口配置;
          • module:配置模塊,主要解析CSS和圖片轉(zhuǎn)換壓縮等功能;
          • plugins:配置插件;
          • devServer:配置開(kāi)發(fā)服務(wù)功能;

          entry

          我們的入口文件一般都是JS文件

          entry: {

          entry: './src/entery.js'

          }

          output

          output用來(lái)告訴webpack最后打包文件的地址和文件名稱

          output: {

          //打包后的文件路徑

          path: path.resolve(__dirname, 'dist'),

          //打包后的文件名稱

          filename: 'bundle.js'

          }

          當(dāng)然還要引入path模塊,這個(gè)是nodejs自帶的模塊;在webpack.config.js文件的頭部引入;

          const path = require('path');

          打包HTML文件

          需要使用html-webpack-plugin插件,它會(huì)將我們的html模板文件打包,自動(dòng)生成一個(gè)引用了所有webpack打包的文件的新的html文件:

          安裝:

          npm install html-webpack-plugin --save-dev

          在配置文件的plugins內(nèi)加載

          var HtmlWebpackPlugin = require('html-webpack-plugin');

          var path = require('path');

          var webpackConfig = {

          entry: 'index.js',

          output: {

          path: path.resolve(__dirname, './dist'),

          filename: 'index_bundle.js'

          },

          plugins: [new HtmlWebpackPlugin({

          minify:{

          removeAttributeQuotes: true,

          collapseWhitespace: true

          },

          template: './src/index.html'

          })]

          };

          這將會(huì)產(chǎn)生一個(gè)包含以下內(nèi)容的文件dist/index.html:

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="UTF-8">

          <title>webpack App</title>

          </head>

          <body>

          <script src="index_bundle.js"></script>

          </body>

          </html>

          這樣一個(gè)最基本的單頁(yè)面的配置文件如下:

          const path = require('path');

          module.exports = {

          //入口文件的配置項(xiàng)

          entry: {

          entry: './src/entry.js'

          },

          //出口文件的配置項(xiàng)

          output: {

          //輸出的路徑,用了Node語(yǔ)法

          path: path.resolve(__dirname, 'dist'),

          //輸出的文件名稱

          filename: 'bundle.js'

          },

          //模塊:例如解讀CSS,圖片如何轉(zhuǎn)換,壓縮

          module: {},

          //插件,用于生產(chǎn)模版和各項(xiàng)功能

          plugins: [new HtmlWebpackPlugin({

          minify:{

          removeAttributeQuotes: true,

          collapseWhitespace: true

          },

          template: './src/index.html'

          })]

          //配置webpack開(kāi)發(fā)服務(wù)功能

          devServer: {}

          }

          多入口配置

          多入口配置的時(shí)候只需要在entry中多增加一個(gè)入口文件

          輸出文件的時(shí)候?qū)ilename的值修改為[name].js,作用是根據(jù)入口文件的名稱,打包成相同的名稱,有幾個(gè)入口文件,就可以打包出幾個(gè)出口文件

          同時(shí)將定義多個(gè)HtmlWebpackPlugin插件,有幾個(gè)頁(yè)面就配置幾項(xiàng)

          module.exports = {

          entry: {

          client1: './src/client1/client1.js',

          client2: './src/client2/client2.js'

          },

          output: {

          path: path.resolve(__dirname, 'dist'),

          filename: 'js/[name].bundle.js'

          },

          plugins: [

          new HtmlWebpackPlugin({

          title: 'client1',

          filename: 'client1.html',

          template: 'src/client1/client1.html',

          inject: true,

          minify: {

          removeComments: true,

          collapseWhitespace: true

          }

          }),

          new HtmlWebpackPlugin({

          title: 'client2',

          filename: 'client2.html',

          template: 'src/client2/client2.html',

          inject: true,

          minify: {

          removeComments: true,

          collapseWhitespace: true

          }

          })

          ],

          };

          #真相來(lái)了#

          ue項(xiàng)目打包

          一、終端運(yùn)行命令 npm run build

          二、打包成功的標(biāo)志與項(xiàng)目的改變,如下圖:

          3、點(diǎn)擊index.html,通過(guò)瀏覽器運(yùn)行,出現(xiàn)以下報(bào)錯(cuò),如圖:

          四、那么應(yīng)該如何修改呢?
          具體步驟如下:
          1、查看package.js文件的scripts命令
          2、打開(kāi)webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl點(diǎn)擊,跳轉(zhuǎn)到index.js文件
          3、其中dev是開(kāi)發(fā)環(huán)境,build是構(gòu)建版本,找到build下面的assetsPublicPath: '/',然后修改為assetsPublicPath: './',即“/”前加點(diǎn)。
          4、終端運(yùn)行 npm run build 即可。

          此時(shí)點(diǎn)擊index.html,通過(guò)瀏覽器運(yùn)行便,會(huì)發(fā)現(xiàn)動(dòng)態(tài)綁定的static的圖片找不到,故static必須使用絕對(duì)路徑。將圖片路徑修改為絕對(duì)路徑,至此,打包完成。


          主站蜘蛛池模板: 人妻少妇久久中文字幕一区二区| 亚洲制服中文字幕第一区| 亚洲第一区在线观看| 国精产品一区一区三区MBA下载 | 超清无码一区二区三区| 成人区精品一区二区不卡亚洲| 中文字幕精品一区二区精品| 国产在线无码视频一区| 国产精品av一区二区三区不卡蜜| 麻豆aⅴ精品无码一区二区| 久久一区二区三区99| 亚洲日本一区二区三区在线不卡| 精品国产一区二区三区AV | 竹菊影视欧美日韩一区二区三区四区五区| 一区二区三区四区在线观看视频 | 制服丝袜一区二区三区| 国产伦一区二区三区高清| 四虎精品亚洲一区二区三区| 国产成人一区二区三区电影网站| 色婷婷av一区二区三区仙踪林| 国产午夜精品片一区二区三区| 精品少妇ay一区二区三区| 51视频国产精品一区二区| 激情内射亚洲一区二区三区爱妻| 91video国产一区| 亚洲一区二区三区在线网站| 性无码一区二区三区在线观看| 亚洲电影一区二区| 一区二区在线观看视频| 日韩毛片基地一区二区三区| 无码少妇丰满熟妇一区二区| 日本香蕉一区二区三区| 精品在线一区二区三区| 日韩精品一区二三区中文| 精品人妻一区二区三区毛片| 任你躁国产自任一区二区三区| 久久久综合亚洲色一区二区三区| 亚洲电影唐人社一区二区| 久久精品无码一区二区三区免费| 精品一区二区三区影院在线午夜| 精品国产免费一区二区三区|