持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天，点击查看活动详情
🎈大家好，我是
橙橙子，新人初来乍到，请多多关照~📝小小的前端一枚，分享一些日常的学习和项目实战总结~
😜如果本文对你有帮助的话，帮忙点点赞呀！ღ( ´･ᴗ･` )比心~
最近Vue项目集成了另一个功能，要求有单独的登录和页面布局，于是想到了vue配置多入口文件。现在项目做完了，总结一下。温故而知新！
ps：为了不影响原本的项目结构，没有大的调整。
vue.config.js
vue.config.js是vue项目的配置文件。基本配置如下
// const path = require('path');
module.exports = {
/** 正式环境和开发环境
* process.env.NODE_ENV==='production' (正式环境)
* process.env.NODE_ENV==='development' (开发环境)
* baseUrl: process.env.NODE_ENV==='production'?"https://x":'',
*/
// baseUrl: '/',//vue-cli3.3以下版本使用
publicPath: '/',//vue-cli3.3+新版本使用
// 构建好的文件输出到哪里
outputDir: "dist",
// assetsDir: "base" // 静态资源打包地址
// 以多页模式构建应用程序。
pages: undefined,
// 是否在保存时使用'eslint-loader'进行检查 // 有效值: true | false | 'error'
// 当设置为'error'时，检查出的错误会触发编译失败
lintOnSave: true,
// 使用带有浏览器内编译器的完整构建版本,是否使用包含运行时编译器的 Vue 构建版本
runtimeCompiler: false,
// babel-loader默认会跳过`node_modules`依赖. // 通过这个选项可以显示转译一个依赖
// 默认babel-loader忽略mode_modules，这里可增加例外的依赖包名
transpileDependencies: [],
// 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 映射文件 打包时使用
productionSourceMap: false,
// 调整内部的webpack配置.
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => { },
// chainWebpack: () => {
// 删除懒加载模块的prefetch，降低带宽压力
// 而且预渲染时生成的prefetch标签是modern版本的，低版本浏览器是不需要的
// config.plugins.delete('prefetch');
// if(process.env.NODE_ENV === 'production') {
// // 为生产环境修改配置...process.env.NODE_ENV !== 'development'
// } else {
// // 为开发环境修改配置...
// }
// },
configureWebpack: () => { },
// configureWebpack: () => {
// // 生产and测试环境
// let pluginsPro = [
// new CompressionPlugin({ //文件开启Gzip，也可以通过服务端(如：nginx)
// filename: '[path].gz[query]',
// algorithm: 'gzip',
// test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
// threshold: 8192,
// minRatio: 0.8,
// }),
// new BundleAnalyzerPlugin(),
// ];
// // 开发环境
// let pluginsDev = [
// new vConsolePlugin({
// filter: [], // 需要过滤的入口文件
// enable: true // 发布代码前记得改回 false
// }),
// ];
// if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置...process.env.NODE_ENV !== 'development'
// config.plugins = [...config.plugins, ...pluginsPro];
// } else {
// // 为开发环境修改配置...
// config.plugins = [...config.plugins, ...pluginsDev];
// }
// },
// CSS 相关选项
css: {
// 将组件内部的css提取到一个单独的css文件（只用在生产环境）
// 也可以是传递给 extract-text-webpack-plugin 的选项对象
// 是否使用css分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用<style>方式内联至html文件中
extract: true,
// 是否在构建css样式映射，false将提高构建速度
sourceMap: false,
// css预设器配置项
loaderOptions: {
// sass: {
// data: ''//`@import "@/assets/scss/mixin.scss";`
// }
},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
// 构建时开启多进程处理 babel 编译
//是否为 Babel 或 TypeScript 使用 thread-loader。
//该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建，在适当的时候开启几个子进程去并发的执行压缩
parallel: require("os").cpus().length > 1,
// PWA 插件相关配置
// 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// vue 2.0 设置跨域
// dev: {
// // proxyTable: {
// // '/api': {
// // target: 'http://127.0.0.1:8080', // 目标地址
// // changeOrigin: true,
// // pathRewrite: {
// // '^/api': '' // 将目标地址变成这个
// // }
// // }
// // },
// },
// 是否启用dll webpack dll
// webpack.dll.conf.js
// 1、entry配置需要dll打包的库
// 2、module配置处理对应文件类型的loader
// 3、增加 webpack.DllPlugin插件
// (1)、path:生成mainfest.json文件的绝对路径。mainfest.json里面的内容为所有被打包到dll.js文件模块id的映射。
// (2)、name：webpack打包时mainfest.json包含的库的暴露出来的函数名名
// (3)、contenxt(可选):引入manifest文件的context，默认为webpack的context
// dll: false,//配置好dll库，设置dll：true；可优化打包效率。减少打包时间，增加库缓存
// 第三方插件配置
pluginOptions: {},
// pluginOptions: {
// 'style-resources-loader': {//https://github.com/yenshih/style-resources-loader
// preProcessor: 'scss',//声明类型
// 'patterns': [
// // path.resolve(__dirname, './src/assets/scss/_common.scss'),
// ],
// // injector: 'append'
// }
// }
};
配置入口
在vue.config.js中，配置入口文件。默认的访问路径是public/index.html。
// 加载和顺序无关，默认加载index
// 默认运行加载index页面，此时新入口的访问路径为 /index2.html#/login
pages: {
index: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html'
},
index2: {
entry: 'src/main2.js',
template: 'public/index2.html',
filename: 'index2.html'
},
}
新建入口html
在public下新建一个index2.html,这是项目的主页，即是项目的入口文件，直接复制index.html,内容可不修改。
新建main2.js
在src下新建main2.js文件，文件入口配置
新建APP2文件
在src下新建APP2.vue文件，作为项目的根组件
新建router2路由
在src下新建router2文件夹，作为项目的路由项目文件
引入
在main2.js中引入router2路由，再引入App2入口文件
import Vue from 'vue';
import App from './App2.vue';
import router from './router2';
new Vue({
router,
render: h => h(App),
}).$mount('#app');
是不是很简单呢，多入口文件就配置好了。
项目结构如下
运行效果
主入口: http://localhost:8081/#/login
第2入口: http://localhost:8081/index.html#/login
是不是很简单呢，这样就实现了多入口了，可以根据自己的项目需要去调整代码，找到最适合自己项目的代码哦~谢谢观看
