常见配置
翻阅了网上一些多页面的实现,很多都是配置webpack的配置文件实现的,对于本初学者来说,不是很好理解。并且vue的配置文件中给出pages
选项,能够实现多页面,没有必要配置webpack了。
如下所示,给出了一个多页面的vue配置:
vue.config.js
module.exports = {
pages:{
index:{
entry:"src/pages/index/main.js",//入口文件
template:"src/pages/index/index.html"//html模板
},
article:{
entry:"src/pages/article/main.js",
template:"src/pages/article/article.html"
},
test:{
entry:"src/pages/test/main.js",
template:"src/pages/test/test.html"
}
}
};
改良
当页面多起来后,一个个配置起来很麻烦。可以写一个函数,自动扫描文件并配置,函数功能如下:
- 扫描
./src/pages
目录下的NAME.vue
文件,产生如下文件并配置:- 子目录
./src/pages/NAME
- 入口文件
./src/pages/NAME/main.js
- html模板文件
./src/pages/NAME/NAME.html
- 子目录
- 返回配置好的
pages
对象
代码如下:
let fs=require('fs');
module.exports = {
lintOnSave: false,
devServer:{
//devServer监听的端口
port:8000,
//配置代理
proxy:{
//拦截的url
'/api':{
//转发到目标服务器的url
target:"http://localhost:8080/",
//是否代理websockets,可选
ws:true,
//是否修改Host头部,可选
changeOrgin:true,
//修改请求路径
pathRewrite:{'/api':''}
}
}
},
pages:getPages()
};
function getPages(){
//定义变量
let pages={};
let entryTemplate=`
import Vue from 'vue'
import App from '../PALCEHOLDE.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
`;
let htmlTemplate= `
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>PALCEHOLDE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app"></div>
</body>
</html>
`;
//获取 ./src/pages/ 下所有的vue文件
fs.readdirSync("./src/pages").forEach((filename)=>{
//找到vue文件,并创建对应的入口、模板文件
if(filename.endsWith(".vue")){
//去掉.vue后缀
let name=filename.split(".")[0];
//判断入门文件、模板文件是否存在,不存在则创建
let entry=`./src/pages/${name}/main.js`;
let template=`./src/pages/${name}/${name}.html`;
if(!fs.existsSync(entry)){//入口不存在
//先创建父目录
fs.mkdirSync(entry.substr(0,entry.lastIndexOf("/")+1),{recursive:true});
//写入
fs.writeFileSync(entry,entryTemplate.replace("PALCEHOLDE",name));
}
if(!fs.existsSync(template)){//html模板文件不存在
//先创建父目录
fs.mkdirSync(template.substr(0,template.lastIndexOf("/")+1),{recursive:true});
//写入
fs.writeFileSync(template,htmlTemplate.replace("PALCEHOLDE",name));
}
//添加到pages中
pages[name]={
entry,
template
}
}
});
return pages;
}
在使用时,只需在,/src/pages/
下新建vue
文件即可,其他的文件会被自动配置:
注意,尽管vue文件名使用小写,但是里面的
name
选项不要全小写