我們平常用vue開發的時候總覺得vue好像就是專門為了單頁面應用而誕生的，其實不是。因為vue在工程化開發的時候很依賴webpack，而webpack是將所有的資源整合到一塊，弄成一個單頁面。但是vue不止可以做單頁面，它還可以做多頁面，如果要做多頁面的話需要對他的依賴，也就是webpack就是重新配置才可以。本文將詳細講webpack的配置。

vue的開發有兩種，一種是直接的在script標簽里引入vue.js文件即可，這樣子引入的話個人感覺做小型的多頁面會比較舒坦，一旦做大型一點的項目，還是離不開webpack。所以另一種方法也就是基于webpack和vue-cli的工程化開發。下面詳解步驟。
先聲明，如果用vue進行工程化開發，首先要有node.js，然后再下一個npm，不過一般新版的node都會有npm所以可以不用弄。指令是在命令行里輸入。首先第一步就是生成一個vue項目，用指令：

vue init webpack test

博主本人聲明的文件名為test，下載好后一路enter，之后便生成了一個vue項目，但是這個vue項目還沒有一些相關的依賴，這個時候需要進入到該文件夾里面，輸入指令：

npm install

如果網速不好，則用cnpm install，效果一樣。略等幾分鐘后整個依賴便已經下完，之后輸入指令：

npm run dev

則會自動打開一個界面，如果報錯不能打開網頁的話只有一種原因，那就端口占用，這個時候需要到/config/index.js目錄下改端口就行。

當一個vue項目完成好所有的配置后，接下來就是我們的重點了，首先我們新新建幾個html文件，博主我新建了一個one.html和two.html，及其與之對應的vue文件和js文件，文件目錄如下：

弄好之后我們進入/build/webpack.base.conf.js目錄下，在module.exports的域里，找到entry，在那里配置添加多個入口：

entry: { app: './src/main.js', one: './src/js/one.js', two: './src/js/two.js'},

注意，紫色部分的變量名要起好，因為后面要用到，以防忘記。

接下來就是對開發環境run dev里進行修改，打開/build/webpack.dev.conf.js文件，在module.exports那里找到plugins，下面寫法如下：

plugins: [ new webpack.DefinePlugin({  'process.env': config.dev.env }), // https://github.com/glenjamin/webpack-hot-middleware#installation--usage new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin 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'] }), new FriendlyErrorsPlugin()]