第二节——vue多页面开发
我们平常用vue开发的时候总觉得vue好像就是专门为了单页面应用而诞生的，其实不是。因为vue在工程化开发的时候很依赖webpack，而webpack是将所有的资源整合到一块，弄成一个单页面。
但是vue不止可以做单页面，它还可以做多页面，如果要做多页面的话需要对他的依赖，也就是webpack就是重新配置才可以。本文将详细讲webpack的配置。
1、进入\build\webpack.base.conf.js目录下，在module.exports的域里，找到entry，在那里配置添加多个入口：
entry: { app: './src/main.js', one: './src/pages/one/one.js' },
注意one的修改。
2、对开发环境run dev里进行修改，打开\build\webpack.dev.conf.js文件，在module.exports那里找到plugins，下面写法如下：
new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true, chunks: ['app'] }), //one new HtmlWebpackPlugin({ filename: 'one.html', template: 'src/pages/one/one.html', inject: true, chunks: ['one'] }),
在chunks那里的app指的是webpack.base.conf.js的entry那里与之对应的变量名。chunks的作用是每次编译、运行时每一个入口都会对应一个entry，如果没写则引入所有页面的资源。
3、之后就对run build也就是编译环境进行配置。首先打开\config\index.js文件，在build里加入这个：
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // one one: path.resolve(__dirname, '../dist/one.html'),
4、然后打开/build/webpack.prod.conf.js文件，在plugins那里找到HTMLWebpackPlugin，然后添加如下代码：
// see https://github.com/ampedandwired/html-webpack-plugin 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'] }), // one new HtmlWebpackPlugin({ filename: config.build.one, template: 'one.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency', chunks: ['manifest', 'vendor', 'one'] }),
其中filename引用的是\config\index.js里的build，每个页面都要配置一个chunks，不然会加载所有页面的资源。
这里展示一下我的项目目录
1、然后one.js文件可以这样写：
import Vue from 'vue' import one from './one.vue' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#one', //teleplate：'<cell/>', // components:{ cell } render: h => h(one) })
这个配置在运行时（npm run dev）会报错
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)网上的解释是这样的：
运行时构建不包含模板编译器，因此不支持 template 选项，只能用 render 选项，但即使使用运行时构建，在单文件组件中也依然可以写模板，因为单文件组件的模板会在构建时预编译为 render 函数。运行时构建比独立构建要轻量30%，只有 17.14 Kb min+gzip大小。
这里面我用render函数取代了组件的写法，在运行就没问题了。
2、one.vue写法如下：
<template>
<div id="one">
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
name: 'one',
data() {
return {
msg: 'I am one'
}
}
}
</script>
3、one.html写法如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>one-page</title> </head> <body> <div id="one"></div> </body> </html>
注意id的修改，之前忘记修改，页面一片空白。
4、最后App.vue里这样写：
<template> <div id="app"> <img src="./assets/logo.png"> <p> <a href="one.html" target="_blank">one-page</a> </p> <router-view/> </div> </template> <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>
大功告成，页面都出来了。
two的写法与之类似，大家可以自己在下面在建一个文件。
over！
