一、需要升级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构建多页面：改造原配置文件，实现自动构建多页面入口和模板文件

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue