vue 配置多页面应用的示例代码

2023-09-06 19:33:04 71

前言:本文基于vue2.5.2,webpack3.6.0（配置多页面原理类似，实现方法各有千秋，可根据需要进行定制化）

vue是单页面应用。但是在做大型项目时，单页面往往无法满足我们的需求，因此需要配置多页面应用。

1.新建vue项目

vueinitwebpackvue_multiple_test
cdvue_multiple_test
npminstall

2.安装glob

npmiglob--save-dev

glob模块用于查找符合要求的文件

3.目标结构目录

.
├──README.md
├──build
│├──build.js
│├──check-versions.js
│├──logo.png
│├──utils.js
│├──vue-loader.conf.js
│├──webpack.base.conf.js
│├──webpack.dev.conf.js
│└──webpack.prod.conf.js
├──config
│├──dev.env.js
│├──index.js
│└──prod.env.js
├──generatePage.sh
├──index.html
├──package-lock.json
├──package.json
├──src
│├──assets
││└──logo.png
│└──pages
│├──page1
││├──App.vue
││├──index.html
││└──index.js
│└──page2
│├──App.vue
│├──index.html
│└──index.js
└──static

其中，pages文件夹用于放置页面。page1和page2用于分别放置不同页面，且默认均包含三个文档:App.vue,index.html,index.js,这样在多人协作时，可以更为清晰地明确每个文件的含义。除此之外，此文件也可配置路由。

4.utils增加下述代码:

constglob=require('glob')
constPAGE_PATH=path.resolve(__dirname,'../src/pages')
constHtmlWebpackPlugin=require('html-webpack-plugin')

其中：PAGE_PATH为所有页面所在的文件夹路径，指向pages文件夹。

exports.entries=function(){
/*用于匹配pages下一级文件夹中的index.js文件*/
varentryFiles=glob.sync(PAGE_PATH+'/*/index.js')
varmap={}
entryFiles.forEach((filePath)=>{
/*下述两句代码用于取出pages下一级文件夹的名称*/
varentryPath=path.dirname(filePath)
varfilename=entryPath.substring(entryPath.lastIndexOf('\/')+1)
/*生成对应的键值对*/
map[filename]=filePath
})
returnmap
}

该方法用于生成多页面的入口对象，例如本例，获得的入口对象如下：

{
page1:'/Users/work/learn/vue/vue_multiple_test/src/pages/page1/index.js',
page2:'/Users/work/learn/vue/vue_multiple_test/src/pages/page2/index.js',
}

其中：key为当前页面的文件夹名称，

```value```为当前页面的入口文件名称

exports.htmlPlugin=function(){
letentryHtml=glob.sync(PAGE_PATH+'/*/index.html')
letarr=[]
entryHtml.forEach((filePath)=>{
varentryPath=path.dirname(filePath)
varfilename=entryPath.substring(entryPath.lastIndexOf('\/')+1)
letconf={
template:filePath,
filename:filename+`/index.html`,
chunks:['manifest','vendor',filename],
inject:true
}
if(process.env.NODE_ENV==='production'){
letproductionConfig={
minify:{
removeComments:true,//移除注释
collapseWhitespace:true,//删除空白符和换行符
removeAttributeQuotes:true//移除属性引号
},
chunksSortMode:'dependency'//对引入的chunk模块进行排序
}
conf={...conf,...productionConfig}//合并基础配置和生产环境专属配置
}
arr.push(newHtmlWebpackPlugin(conf))
})
returnarr
}

4.webpack.base.conf.js修改入口如下：

```entry:utils.entries()```

5.webpack.dev.conf.js删除下述代码

newHtmlWebpackPlugin({
filename:'index.html',
template:'index.html',
inject:true
})

6.webpack.prod.conf.js删除下述代码

newHtmlWebpackPlugin({
filename:config.build.index,
template:'index.html',
inject:true,
minify:{
removeComments:true,
collapseWhitespace:true,
removeAttributeQuotes:true
},
chunksSortMode:'dependency'
})

7.构建结果

【dev】开发环境下，执行npmrundev访问:

http://localhost:8080/page1/index.html
http://localhost:8080/page2/index.html

即为访问不同的页面


【production】生产环境下，执行npmrunbuild,生成的文件目录如下所示:

│├──dist
│├──page1
││└──index.html
│├──page2
││└──index.html
│└──static
│├──css
││├──page1.86a4513a3e04c0dcb73e6d6aea4580e4.css
││├──page1.86a4513a3e04c0dcb73e6d6aea4580e4.css.map
││├──page2.86a4513a3e04c0dcb73e6d6aea4580e4.css
││└──page2.86a4513a3e04c0dcb73e6d6aea4580e4.css.map
│└──js
│├──manifest.0c1cd46d93b12dcd0191.js
│├──manifest.0c1cd46d93b12dcd0191.js.map
│├──page1.e2997955f3b0f2090b7a.js
│├──page1.e2997955f3b0f2090b7a.js.map
│├──page2.4d41f3b684a56847f057.js
│├──page2.4d41f3b684a56847f057.js.map
│├──vendor.bb335a033c3b9e5d296a.js
│└──vendor.bb335a033c3b9e5d296a.js.map

8.【懒人福利】使用shell脚本自动构建基础页面

在项目文件下新建shell脚本generatePage.sh,并在脚本中写入下述代码：

#!/bin/bash
#打开pages文件夹，并创建文件
cdsrc/pages
forfilein$(ls)
do
if[$file==$1];then
echo$1'文件已存在,请使用其他名字'
exit
fi
done
mkdir$1
cd$1
#生成index.html
echo"">index.html
echo'

'>index.html #生成App.vue echo"">App.vue echo' '>App.vue #生成index.js echo"">index.js echo"importVuefrom'vue' importAppfrom'./App' Vue.config.productionTip=false /*eslint-disableno-new*/ newVue({ el:'#app', components:{App}, template:'' })">index.js

之后在项目路径下输入下述命令:

bashgeneratePage.shpage4

即可在pages文件夹下生成一个名为page4的新页面。还可以通过自定义shell脚本的内容写入路由等，以实现定制需求。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

vue 配置多页面应用的示例代码

热门推荐

随机推荐