如何实现Vue多页面开发
创建文件
一般我们的Vue项目都是单页面的，因为Vue在工程化开发中依赖了Webpack，Webpack帮助我们将所有资源整合到一个单页面中。但是，当我们需要实现多页面开发时，我们需要对Webpack进行修改。首先，我们需要创建以下三个文件：
-
- src/pages/one/one.js
-
修改Webpack配置
接下来，我们需要对Webpack的配置进行修改。
1. 打开文件，在module.exports中找到entry，并添加多个入口文件one.js，如下所示：
entry: {
one: './src/pages/one/one.js',
}
2. 对开发环境进行修改，打开文件，找到plugins，并添加如下配置：
new HtmlWebpackPlugin({
filename: '',
template: '',
inject: true,
chunks: ['one']
})
3. 对编译环境进行配置，打开config/index.js文件，在build对象里加入以下配置：
one: (__dirname, '')
4. 配置生产环境，打开文件，找到plugins，并添加如下配置：
new HtmlWebpackPlugin({
filename: ,
template: '',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
chunks: ['manifest', 'vendor', 'one']
})
编写页面文件
接下来，我们需要编写Vue页面文件。
1. 在one.js文件中，可以这样写：
import Vue from 'vue'
import one from ''
false
new Vue({
el: '#one',
render: h > h(one)
})
2. 在文件中，可以这样写：
多页面开发之页面一
3. 在文件中，可以将页面连接到主页面上：
查看效果
最后，我们可以查看效果，如果配置成功，我们就可以访问多个页面了。
版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。
