vue项目添加多页面配置的步骤详解

2023-08-23 03:45:06 249

公司使用vue-cli创建的vue项目在初始化时并没有做多页面配置，随着需求的不断增加，发现有必要使用多页面配置。看了很多vue多页面配置的文章，基本都是在初始化时就配置了多页面。而且如果使用这些实现，需要调整当前项目的目录结构，这点也是不能接受的。

最后，参考这些文章，在不调整当前项目目录结构实现了多页面的配置的添加。这里做下记录、总结，方便以后复用。如果还能有幸帮助到有同样需求的童鞋的话，那就更好了。

实现步骤

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需要对该页面的所有路由添加同文件夹名的公共路径，用于解析：
importVuefrom'vue'
importRouterfrom'vue-router'
importHelloWorldfrom'@/page1/components/HelloWorld'//这里也需要留意
Vue.use(Router)
exportdefaultnewRouter({
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:[
//将所有多入口遍历成路径解析项
...((()=>{
letwrites=[]
for(letpropinutils.multipleEntrys){
//使用属性名匹配为正则
//这就是上面“需要对该页面的所有路由添加同文件夹名的公共路径”的原因
letreg=newRegExp(`^/${prop}/`)
writes.push({
from:reg,
//使用属性名读取模板文件
//这就是上面“模板文件名称需要与文件夹名称相同”的原因
to:path.posix.join(config.dev.assetsPublicPath,`${prop}.html`)
})
}
returnwrites
})()),
//匹配所有路径一定要在最后，否则该匹配之后的项，不会被执行
{from:/.*/,to:path.posix.join(config.dev.assetsPublicPath,'index.html')}
],
}
//在已经的HtmlWebpackPlugin中添加chunks配置，否则默认页面会注入所有页面的js文件
...
plugins:[
...
newHtmlWebpackPlugin({
filename:'index.html',
template:'index.html',
inject:true,
//增加此行，
//'app'为默认入口名称，如果你的默认入口不是'app'
//则这里需要替换
chunks:['manifest','vendor','app']
})
...
]
...
//在`devWebpackConfig`定义之后，紧接着添加多页面输出：
for(letpropinutils.multipleEntrys){
devWebpackConfig.plugins.push(newHtmlWebpackPlugin({
filename:`${prop}.html`,
//html模板路径,使用属性名作为文件夹名称
//这是新页面文件夹名称需要和多入口配置变量属性名相同的原因
template:`./src/${prop}/${prop}.html`,
inject:true,
chunks:['manifest','vendor',prop],
}))
}

最后，添加多页面相互跳转链接：


...
topageB
...


...
topageA
...

到这里，开发环境的多页面配置已经完成，重新npmrundev一下，即可多页面跳转。

生产环境读取多入口配置

首先，在webapck.prod.config.js中添加多页面输出。

//在已经的HtmlWebpackPlugin中添加chunks配置，否则默认页面会注入所有页面的js文件
...
plugins:[
...
newHtmlWebpackPlugin({
...
chunks:['manifest','vendor','app']//增加此行
...
})
...
]
...
//build/webapck.prod.config.js的webpackConfig定义后紧接着添加
for(letpropinutils.multipleEntrys){
webpackConfig.plugins.push(newHtmlWebpackPlugin({
filename:`${prop}.html`,
template:`./src/${prop}/${prop}.html`,
inject:true,
chunks:['manifest','vendor',prop],
minify:{
removeComments:true,
collapseWhitespace:true,
removeAttributeQuotes:true
},
chunksSortMode:'dependency'
}))
}

然后，开发环境不同路径指向不同输出文件是由historyApiFallback来处理的，生产就需要在web服务中将不同路径指向打包后的不同文件。这里以nginx为例，配置如下：

server{
listen92default_server;
listen[::]:92default_server;
server_name_;
rootD:\vue-multi-entry\dist;
location/{
try_files$uri$uri//index.html;
}
location/page1/{
try_files$uri$uri//page1.html;
}
}

以上，整个多页面的配置就已经完成。这里是完整demo

关于webpack4.x版本的差异

如果你使用的是webpack4.x版本，关于webapck.prod.config.js中chunks配置的顺序就是这样的：[prop,'manifest','vendor']。

总结

以上所述是小编给大家介绍的vue项目添加多页面配置的步骤详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

vue项目添加多页面配置的步骤详解

热门推荐

随机推荐