13518219792
怎么在vue项目中添加多页面配置？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
成都创新互联"三网合一"的企业建站思路。企业可建设拥有电脑版、微信版、手机版的企业网站。实现跨屏营销，产品发布一步更新，电脑网络+移动网络一网打尽，满足企业的营销需求！成都创新互联具备承接各种类型的做网站、网站制作项目的能力。经过10多年的努力的开拓，为不同行业的企事业单位提供了优质的服务，并获得了客户的一致好评。
实现步骤
1.添加新增入口相关文件;
2.使用变量维护多入口；
3.开发环境读取多入口配置；
4.生产环境读取多入口配置；
新增入口相关文件
在 src 目录下新增一个 page1 文件夹，新建新页面的所需的相关文件(入口文件、HTML模板文件等)。我这边直接 vue-cli 初始化创建相关文件复制了一份到 page1 文件夹下。如下：
├─App.vue
├─main.js
├─page1.html // 这里模板文件名称需要与文件夹名称相同，方便输出模板读取
├─router
| └index.js
├─components
| └HelloWorld.vue
├─assets
| └logo.png
page1/router/index.js 需要对该页面的所有路由添加同文件夹名的公共路径，用于解析：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/page1/components/HelloWorld' // 这里也需要留意
Vue.use(Router)
export default new Router({
mode: 'history',
base: '/',
routes: [
{
path: '/page1/',
redirect: '/page1/index'
},
{
path: '/page1/index',
name: 'HelloWorld',
component: HelloWorld
}
]
})使用变量维护多入口
我们在项目目录下的 build/utils.js 的最后 exports 一个指定多入口的对象。如下：
// 这里，每个属性就是一个页面配置，指定该页面的入口文件
// 如果需要添加，只需多增加一个属性
// 属性名必和html模板文件名、目录名称相同
exports.multipleEntrys = {
page1: './src/page1/main.js'
}之所以使用 build/utils.js ，是因为该文件在 webpack.base.conf.js 、 webpack.prod.conf.js 、 webpack.dev.conf.js 都用导入。
开发环境读取多入口配置
首先，在 build/webpack.base.conf.js 中，我们把上面定义的入口添加进 entry 配置：
entry: {
app: './src/main.js',
...utils.multipleEntrys // entry添加该行
}然后，在 build/webpack.dev.conf.js 添加路径解析和多页面输出：
// 添加解析，将historyApiFallback的属性修改如下：
historyApiFallback: {
rewrites: [
// 将所有多入口遍历成路径解析项
...((()=>{
let writes = []
for(let prop in utils.multipleEntrys){
// 使用属性名匹配为正则
// 这就是上面“需要对该页面的所有路由添加同文件夹名的公共路径”的原因
let reg = new RegExp(`^/${prop}/`)
writes.push({
from: reg,
// 使用属性名读取模板文件
// 这就是上面“模板文件名称需要与文件夹名称相同”的原因
to: path.posix.join(config.dev.assetsPublicPath, `${prop}.html`)
})
}
return writes
})()),
// 匹配所有路径一定要在最后，否则该匹配之后的项，不会被执行
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }
],
}
// 在已经的HtmlWebpackPlugin中添加chunks配置，否则默认页面会注入所有页面的js文件
...
plugins: [
...
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
// 增加此行，
// 'app'为默认入口名称，如果你的默认入口不是'app'
// 则这里需要替换
chunks: ['manifest', 'vendor', 'app']
})
...
]
...
// 在`devWebpackConfig`定义之后，紧接着添加多页面输出：
for(let prop in utils.multipleEntrys){
devWebpackConfig.plugins.push(new HtmlWebpackPlugin({
filename: `${prop}.html`,
// html模板路径,使用属性名作为文件夹名称
// 这是新页面文件夹名称需要和多入口配置变量属性名相同的原因
template: `./src/${prop}/${prop}.html`,
inject: true,
chunks: ['manifest', 'vendor', prop],
}))
}最后，添加多页面相互跳转链接：
