vue4.0，配置多入口程序

参照https://www.jb51.net/article/175011.htm

 

1.创建项目

vue create xxxx //xxx为项目名

2.调整项目路径

    删除main.js，App.vue，router文件夹

    将vue文件都放到components中，将page文件夹删除

   

3.添加配置文件vue.config.js（直接抄的，未作更改）

let path = require("path");
let glob = require("glob"); // 用于筛选文件

// 工厂函数 - 配置pages实现多页面获取某文件夹下的html与js
function handleEntry(entry) {
    let entries = {};
    let entryBaseName = "";
    let entryPathName = "";
    let entryTemplate = "";
    let applicationName = "";

    glob.sync(entry).forEach(item => {
        console.log("!!!", item);
        entryBaseName = path.basename(item, path.extname(item));
        console.log("entryBaseName:", entryBaseName);
        entryTemplate = item.split("/").splice(-3);
        console.log("entryTemplate:", entryTemplate);
        entryPathName = entryBaseName; // 正确输出js和html的路径
        console.log("entryPathName", entryPathName);

        entries[entryPathName] = {
            entry: "src/" +
                entryTemplate[0] +
                "/" +
                entryTemplate[1] +
                "/" +
                entryTemplate[1] +
                ".js",
            template: "src/" +
                entryTemplate[0] +
                "/" +
                entryTemplate[1] +
                "/" +
                entryTemplate[2],
            title: entryTemplate[2],
            filename: entryTemplate[2]
        };
    });

    return entries;
}

let pages = handleEntry("./src/applications/**?/*.html");
console.log(pages);

// 以下开始配置
module.exports = {
    lintOnSave: false, // 关掉eslint
    /**
     * baseUrl 从 3.3起废用，使用pubilcPath代替
     * 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
     * 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。
     */
    publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
    productionSourceMap: false,
    // 入口设置
    pages,
    devServer: {
        index: "/", // 运行时，默认打开application1页面
        // 告诉dev-server在服务器启动后打开浏览器，将其设置true为打开默认浏览器
        open: true,
        host: "localhost",
        port: 8080,
        https: false,
        hotOnly: false,
        // 配置首页 入口链接
        before: app => {
            app.get("/", (req, res, next) => {
                for (let i in pages) {
                    res.write(`/${i}
`);
                }
                res.end();
            });
        }
    }
};

4.添加文件夹applications，存放多入口，每个入口application下分别有4个文件

router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../../../components/Home.vue";

Vue.use(VueRouter);

const routes = [{
        path: "/",
        name: "home",
        component: Home
    },
    {
        path: "/about",
        name: "about",
        component: () =>
            import ( /* webpackChunkName: "about" */ "../../../components/About.vue")
    }
];

const router = new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes
});

export default router;

application.js

import Vue from "vue";
import exam from "./exam.vue";
import router from "./router";

Vue.config.productionTip = false;

new Vue({
    router,
    render: h => h(exam)
}).$mount("#app");

application.html

application.vue

 

 

最终项目截图（我的两个入口为admin，user）