vue 2.0多頁面開發

1、爲項目添加多個入口

找到\build\webpack.base.conf.js文件：

1 module.exports = {
2   //...,
3   //vue的多頁面開發：應用程序可以存在多個入口
4   entry: {
5     app: './src/main.js',
6     product: './src/product.js'
7   },
8   //...
9 }

 

2、爲開發環境和生產環境配置入口對應的配置項

打開：\build\webpack.dev.conf.js

 1 const devWebpackConfig = merge(baseWebpackConfig, {
 2   //...
 3   plugins: [
 4     new webpack.DefinePlugin({
 5       'process.env': require('../config/dev.env')
 6     }),
 7     new webpack.HotModuleReplacementPlugin(),
 8     new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
 9     new webpack.NoEmitOnErrorsPlugin(),
10     // https://github.com/ampedandwired/html-webpack-plugin
11     new HtmlWebpackPlugin({
12       filename: 'index.html',
13       template: 'index.html',
14       inject: true,
15       chunks:['app']
16     }),
17     new HtmlWebpackPlugin({
18       filename: 'product.html',
19       template: 'product.html',
20       inject: true,
21       chunks:['product']
22     }),
23   //...
24   ]
25 })

打開：\build\webpack.prod.conf.js，plugins節點下面加：

 1 //...
 2 new HtmlWebpackPlugin({
 3       filename: process.env.NODE_ENV === 'testing'
 4         ? 'index.html'
 5         : config.build.index,
 6       template: 'index.html',
 7       inject: true,
 8       minify: {
 9         removeComments: true,
10         collapseWhitespace: true,
11         removeAttributeQuotes: true
12         // more options:
13         // https://github.com/kangax/html-minifier#options-quick-reference
14       },
15       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
16       chunksSortMode: 'dependency',
17       chunks: ['manifest', 'vendor', 'app']
18     }),
19     new HtmlWebpackPlugin({
20       filename: process.env.NODE_ENV === 'testing'
21         ? 'product.html'
22         : config.build.product,
23       template: 'product.html',
24       inject: true,
25       minify: {
26         removeComments: true,
27         collapseWhitespace: true,
28         removeAttributeQuotes: true
29         // more options:
30         // https://github.com/kangax/html-minifier#options-quick-reference
31       },
32       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
33       chunksSortMode: 'dependency',
34       chunks: ['manifest', 'vendor', 'product']
35     }),
36 //...

 

3、配置編譯環境

1 build: {
2     // Template for index.html
3     index: path.resolve(__dirname, '../dist/index.html'),
4     product: path.resolve(__dirname, '../dist/product.html'),
5     //...
6 }

 

4、根目錄添加product.html

後面product關聯的頁面入口都是這個頁面。

 

5、src目錄添加product.js和product.vue

product.js類似於單頁面的main.js的作用

import Vue from 'vue'
import product from './product.vue'

Vue.config.productionTip = false

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

product.vue類似於單頁面的App.vue的作用

 1 <template>
 2   <div id="prodcut">
 3     {{msg}}
 4   </div>
 5 </template>
 6 
 7 <script>
 8 export default {
 9   name: 'prodcut',
10   data () {
11     return {
12       msg: 'I am prodcut'
13     }
14   }
15 }
16 </script>

 

6、添加測試鏈接

App.vue添加produt.html鏈接

 1 <template>
 2   <div id="app">
 3     <img src="./assets/logo.png">
 4     <a href="product.html">product</a><br>
 5     <router-view/>
 6   </div>
 7 </template>
 8 
 9 <script>
10 export default {
11   name: 'App'
12 }
13 </script>
14 
15 <style>
16 #app {
17   font-family: 'Avenir', Helvetica, Arial, sans-serif;
18   -webkit-font-smoothing: antialiased;
19   -moz-osx-font-smoothing: grayscale;
20   text-align: center;
21   color: #2c3e50;
22   margin-top: 60px;
23 }
24 </style>

 

 

 7、測試

可以看到編譯後的文件index.html和product.html已經分別編譯了，各自作爲單頁面的入口：

 

編譯後的js也是各自的：

 

下面是演示效果：

 

 

 

 

 

 

8、源碼

https://github.com/iprometheus/vue-multipage

 

9、參考文檔

http://blog.csdn.net/Tank_in_the_street/article/details/73732801