我們平時開發(fā) vue項(xiàng)目的時候,就有一種感覺就是 vue就像是專門為單頁應(yīng)用而誕生的,因?yàn)槿思业墓俜轿臋n中也說了

其實(shí)不是的,因?yàn)関ue在工程化開發(fā)的時候依賴于 webpack ,而webpack是將所有的資源整合到一塊后形成一個html文件 一堆 js文件, 如果將vue實(shí)現(xiàn)多頁面應(yīng)用,就需要對他的依賴進(jìn)行重新配置,也就是修改webpack的配置文件.
vue的開發(fā)有兩種，一種是直接的在script標(biāo)簽里引入vue.js文件即可，這樣子引入的話個人感覺做小型的多頁面會比較舒坦，一旦做大型一點(diǎn)的項(xiàng)目，還是離不開webpack。所以另一種方法也就是基于webpack和vue-cli的工程化開發(fā)。下面詳解步驟。

首先第一步:
進(jìn)入\build\webpack.base.conf.js目錄下，在module.exports的域里，找到entry，在那里配置添加多個入口：

// 文件路徑更具自己的實(shí)際情況進(jìn)行配置,我這僅是 demo
entry: {
    app: './src/main.js',
    one: './src/js/one.js',
    two: './src/js/two.js'
  },

在這里插入圖片描述

這里的 one two 一定時要先在這里定義好的,后面是要用到的,好比 里面的app 不是隨便瞎寫的

第二步:
對開發(fā)環(huán)境run dev里進(jìn)行修改，打開\build\webpack.dev.conf.js文件，在module.exports那里找到plugins，下面寫法如下：

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      chunks: ['app']
    }), 
    new HtmlWebpackPlugin({
      filename: 'one.html',
      template: 'one.html',
      inject: true,
      chunks: ['one']
    }),
    new HtmlWebpackPlugin({
      filename: 'two.html',
      template: 'two.html',
      inject: true,
      chunks: ['two']
    }),

在這里插入圖片描述

這里的配置比較重要 ,如果沒寫好的 在打包的時候就會報錯了, 在chunks那里的app指的是webpack.base.conf.js的 entry 那里與之對應(yīng)的變量名。chunks的作用是每次編譯、運(yùn)行時每一個入口都會對應(yīng)一個entry，如果沒寫則引入所有頁面的資源。也就是沒有改項(xiàng)目配置前形成的單頁應(yīng)用

第三步:
對run build也就是編譯環(huán)境進(jìn)行配置。首先打開\config\index.js文件，在build里加入這個：

index: path.resolve(__dirname, '../dist/index.html'),
one: path.resolve(__dirname, '../dist/one.html'),
two: path.resolve(__dirname, '../dist/two.html'),

在這里插入圖片描述

這里也就是打包之后dist文件夾中形成的 html

第四步:
打開/build/webpack.prod.conf.js文件，在 plugins 那里找到 HTMLWebpackPlugin，然后添加如下代碼：
其實(shí)復(fù)制粘貼改吧改吧就能用

new HtmlWebpackPlugin({
        filename: config.build.index,
        template: 'index.html',
        inject: true,
        minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true
            
        },
        chunksSortMode: 'dependency',
        //(在這里和你上面chunks里面的名稱對應(yīng))
        chunks: ['manifest', 'vendor', 'app']
    }),
    new HtmlWebpackPlugin({
        filename: config.build.one,
        template: 'one.html',
        inject: true,
        minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true
        },
        chunksSortMode: 'dependency',
        chunks: ['manifest', 'vendor', 'one']
    }),

在這里插入圖片描述

其中filename引用的是\config\index.js里的build，每個頁面都要配置一個chunks，不然會加載所有頁面的資源。

上面的操作完成之后進(jìn)行下面的傻瓜式操作 對咱們創(chuàng)建的文件進(jìn)行碼代碼
one.js文件可以這樣寫：

import Vue from 'vue'
import one from './one.vue'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#one',
  render: h => h(one)
})

在這里插入圖片描述

one.vue寫法如下：

<template>
  <div id="one">
    {{msg}}
  </div>
</template>

<script>
export default {
  name: 'one',
  data () {
    return {
      msg: 'I am one'
    }
  }
}
</script>

tow 文件中的代碼一樣 我就不寫了
主要步驟我寫完了,咱們試試打包文件 輸入 npm run build 打包文件

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

再此附上我的QQ: 2489757828 有問題的話可以共同探討
我的博客: 李大玄