vue之多页面

最新推荐文章于 2021-11-18 15:12:05 发布

千霜

最新推荐文章于 2021-11-18 15:12:05 发布

阅读量540

点赞数 1

分类专栏：前端文章标签： vue 多页面

本文链接：https://blog.csdn.net/jdbdh/article/details/90514356

版权

前端专栏收录该内容

40 篇文章 0 订阅

订阅专栏

常见配置

翻阅了网上一些多页面的实现，很多都是配置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选项不要全小写

千霜

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue之多页面

常见配置翻阅了网上一些多页面的实现，很多都是配置webpack的配置文件实现的，对于本初学者来说，不是很好理解。并且vue的配置文件中给出pages选项，能够实现多页面，没有必要配置webpack了。如下所示，给出了一个多页面的vue配置：vue.config.jsmodule.exports = { pages:{ index:{ entr...
复制链接

扫一扫

专栏目录