vue 2.0多页面开发

1、为项目添加多个入口

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

 module.exports = {
   //...,
   //vue的多页面开发：应用程序可以存在多个入口
   entry: {
app: './src/main.js',
     product: './src/product.js'
   },
   //...
 }

2、为开发环境和生产环境配置入口对应的配置项

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

 const devWebpackConfig = merge(baseWebpackConfig, {
   //...
   plugins: [
     new webpack.DefinePlugin({
       'process.env': require('../config/dev.env')
     }),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
     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: 'product.html',
       template: 'product.html',
       inject: true,
       chunks:['product']
     }),
   //...
   ]
 })

打开：\build\webpack.prod.conf.js，plugins节点下面加：

 //...
 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: process.env.NODE_ENV === 'testing'
         ? 'product.html'
         : config.build.product,
       template: 'product.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', 'product']
     }),
 //...

3、配置编译环境

 build: {
     // Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
     product: path.resolve(__dirname, '../dist/product.html'),
     //...
 }

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的作用

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

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

6、添加测试链接

App.vue添加produt.html链接

 <template>
   <div id="app">
     <img src="./assets/logo.png">
<a href="product.html">product</a><br>
     <router-view/>
   </div>
 </template>

 <script>
 export default {
   name: 'App'
 }
 </script>

 <style>
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
 }
 </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