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
以上是 vue 2.0多页面开发 的全部内容， 来源链接： utcz.com/z/376536.html
