vue2.0多頁面開發

我們平常用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()
]

在chunks那里的app指的是webpack.base.conf.js的entry那里與之對應的變量名。chunks的作用是每次編譯、運行時每一個入口都會對應一個entry，如果沒寫則引入所有頁面的資源。

 

之后就對run build也就是編譯環境進行配置。首先打開\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'),

然后打開/build/webpack.prod/conf.js文件，在plugins那里找到HTMLWebpackPlugin，然后添加如下代碼：

new HtmlWebpackPlugin({
  filename: process.env.NODE_ENV === 'testing'
    ? 'index.html'
    : config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
// more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency',
  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']
}),
  new HtmlWebpackPlugin({
      filename: config.build.two,
      template: 'two.html',
      inject: true,
      minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
},
      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'two']
  }),

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

 

然后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>

two的寫法與之類似，所以不寫下來了，

 

然后App.vue里通過這樣寫：

<template>
  <div id="app">
    <a href="one.html">one</a><br>
    <a href="two.html">two</a><br>
    {{msg}}
  </div>
</template>

這樣子當你打開頁面的時候，點擊上面one的鏈接就會跳轉到one.html，點擊two就跳轉到two.html。這樣子就大功告成了。

轉自《vue2.0之多頁面的開發》