Vue cli3 或 Vue cli4 配置多入口多页面问题（详解）

全宇宙最好-阿狸

于 2021-03-05 17:43:04 发布

阅读量3.8k

点赞数 3

分类专栏： vue 文章标签： vue vue-cli3

本文链接：https://blog.csdn.net/QINGYUMARY/article/details/114402103

版权

本文介绍了如何在Vue CLI4项目中配置多入口和多页面应用。首先，在public文件夹复制并改名多个index.html作为入口文件。接着，在src/pages下创建对应页面的文件夹，包含各自的App.vue、main.js和router.js。由于新版Vue CLI缺少vue.config.js，需要手动创建并配置。每个页面的App.vue、main.js保持一致，router.js根据需求定制。最后，重点在于index文件夹中的router.js，用于分配各个页面路由。通过本文步骤，可以成功实现多页面应用的搭建。

摘要由CSDN通过智能技术生成

本项目用的是Vue cli4,如果是vue cli3也是可以参考使用的

省略创建项目这个步骤，接下来在创建好的项目里找到public文件夹，复制多个index.html入口文件，并且修改名称；

每个入口文件只是文件名改变，里面内容复制原有的index.html，每个文件里id="app"也是不变的

在src文件夹下创建一个pages文件 ——>再创建四个文件夹：admin 、index、mobile、web ——> 每个文件夹下都要有App.vue、main.js、router.js

因为现在用新版vuecli创建出来的项目比较以前会没有vue.config.js，所以需要在根目录下手动创建它，我这儿里面只是基本配置，仅作参考，具体情况可以自己配置

// const { resolve } = require("core-js/fn/promise")
const path = require("path");
function resolve(dir) {
	return path.join(__dirname, dir)
}
let pages = {
	index: {
		entry: 'src/pages/index/main.js',
		template: 'public/index.html',
		filename: