vue-cli3构建多页面：提取通用模板和入口文件，自动构建多页配置

最新推荐文章于 2024-03-30 09:48:32 发布

猿始森林

最新推荐文章于 2024-03-30 09:48:32 发布

阅读量9.6k

点赞数 6

分类专栏： Vue 文章标签： vue多页面配置

本文链接：https://blog.csdn.net/guang_s/article/details/89406202

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、需要升级vue-cli的，请参照官网

https://cli.vuejs.org/zh/guide/installation.html

二、创建配置文件vue.config.js

1、使用vue create创建项目之后，我们看到项目里没有像vue-cli2的配置文件，目录如下：

在这里插入图片描述

2、在根目录创建vue.config.js文件，相关配置参数可参考：

https://cli.vuejs.org/zh/config/#pages

3、添加multi-page模式配置

一个页面需要配置对应的入口文件（entry）、模板文件（template）、生成的文件（filename），如下：

vue.config.js文件

// vue.config.js

module.exports = {
    pages: {
        index: {
            entry: 'src/pages/index/index.js',
            template: 'src/pages/index/index.html',
            filename: 'index.html',
            chunks: ['chunk-vendors', 'chunk-common', 'index']  // 'chunk-vendors', 'chunk-common' 是公用资源文件
        },
        shop: {
            entry: 'src/pages/shop/shop.js',
            template: 'src/pages/shop/shop.html',
            filename: 'shop.html',
            chunks: ['chunk-vendors', 'chunk-common', 'shop']
        }
  }
};

页面文件结构

在这里插入图片描述

4、如上，是vue-cli3为我们提供的多页面配置，相比vue-cli2要方便了很多。但是按照上面的方式进行配置的话：

我们每增加一个页面都需要手动维护配置文件；
并且还需要维护入口文件和模板文件；
这样会给开发带来很多重复又繁琐的工作，所以我们需要提取公用模板文件和入口文件。

三、自动配置多页参数，提取公用模板以及自动创建入口文件

模板文件（template）只有id 和 title是不一样的，我们可以通过htmlWebpackPlugin.options传参解决；
入口文件（entry）只有id 和引用的vue文件路径是不一样的，但是因为import from 后面不支持接收变量，所以没法通过传参解决，这个时候我们需要借助glob来自动创建入口文件；
module.exports.pages多页面文件配置也需要借助glob来实现自动配置；

1、安装glob模块

npm i glob -D

2、创建getPages方法，处理配置文件

const path = require('path');
const fs = require('fs');
const glob = require('glob');

// 配置选项
const config = {
    pages: getPages()
};

// 获取多页面的配置数据
function getPages() {
    const pages = {};
    
    glob.sync('./src/pages/**/*.vue').forEach(function (pageUrl) {
        const ext = path.extname(pageUrl);
        const pageCode = path.basename(pageUrl, ext);
        
        // 生成入口文件
        const entryFile = `./entry/${pageCode}.js`;
        fs.exists(entryFile, function (exists) {
            if(exists) return;
            // 创建文件及写入文件内容
            const appTpl = '.' + pageUrl;
            const entryData = `import Vue from 'vue';\nimport App from '${appTpl}';\nVue.config.productionTip = false;\nnew Vue({ render: h => h(App) }).$mount('#${pageCode}'); `;
            fs.writeFile(entryFile, entryData, function(err){
                if(err) console.log(err);
            });
        });
        
        // 自定义页面数据
        const pageData = {
            title: '',
            code: pageCode
        };
        // 配置多页面
        pages[pageCode] = {
            entry: entryFile,               // 入口文件
            template: 'index.html',         // 模板文件
            filename: pageCode + '.html',   // 打包后的文件路径
            minify: false,                  // 是否压缩
            chunks: ['chunk-vendors', 'chunk-common', pageCode],   // 引入资源文件
            chunksSortMode: 'manual',       // 控制 chunk 的排序。none | auto（默认）| dependency（依赖）| manual（手动）| {function}
            pageData: pageData
        };
    });
    return pages;
}

module.exports = config;

3、模板文件（public/index.html）

<% 
    const page = htmlWebpackPlugin.options.pageData || { title:'vue cli3' };
%>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= page.title %></title>
</head>

<body>
    <noscript>
        <strong>很抱歉，如果没有启用javascript，vue-cli3无法正常工作。请启用它以继续。</strong>
    </noscript>
    <div id="app">
        <div id="<%= page.code %>"></div>
    </div>
    <!-- 生成的文件将自动注入 -->
</body>

</html>

4、生成的入口文件（entry/index.js）

import Vue from 'vue';
import App from '../src/pages/index/index.vue';
Vue.config.productionTip = false;
new Vue({ render: h => h(App) }).$mount('#index');

四、创建page.json文件，配置title

上面的配置文件可以看到，页面title还没有配置，这里我们采用创建page.json文件的方式来存储页面相关参数：

{
    "index": {
        "title": "首页"
    },
    "shop": {
        "title": "商店"
    },
    "shopDetail": {
        "title": "商店详情"
    }
}

// 自定义页面数据
const pagesJson = require('./config/page.json');
const pageData = pagesJson[pageCode] || {};
Object.assign(pageData, {
	code: pageCode
});

五、配置主入口文件

1、增加入口文件main.js的配置

注：这样配置的话，最后打包的文件会生成app.html，vue cli3貌似并没有提供直接配置入口文件的选项

// 配置选项
const config = {
    pages: Object.assign(getPages(), {
        app: './src/main.js'    // 配置主入口文件（会生成 app.html，vue cli3并没有提供直接配置入口文件的选项）
    })
};

2、第二种方式，就是在每一个页面的入口文件里面引入main.js，vue cli3会自动提取多次引用的模块到chunk-common.js文件

const entryData = `import Vue from 'vue';\nimport App from '${appTpl}';\nimport from '../src/main.js';\nVue.config.productionTip = false;\nnew Vue({ render: h => h(App) }).$mount('#${pageCode}'); `;

3、增加引入插件（app）

chunks: ['chunk-vendors', 'chunk-common', 'app', pageCode],

六、页面文件结构，如下：

在这里插入图片描述

如此，我们就只完成了模板文件和入口文件的自动化构建，现在我们就只需要编辑src/pages/*.vue了

七、项目地址（记得给星哦）

https://github.com/shiguang0116/vue-cli3-multipage

八、相关文章

vue-cli2构建多页面：改造原配置文件，实现自动构建多页面入口和模板文件

猿始森林

关注

6
点赞
踩
18

收藏

觉得还不错? 一键收藏
7
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录