vue 配置多入口项目（cli 版本4.1.2）

最新推荐文章于 2023-04-27 09:08:51 发布

「已注销」

最新推荐文章于 2023-04-27 09:08:51 发布

阅读量1.7k

点赞数 1

文章标签： vue.js 多入口配置

本文链接：https://blog.csdn.net/qq_34295211/article/details/104700841

版权

本文介绍了如何在Vue CLI 4.1.2版本的项目中配置多入口，包括创建pages文件夹存放入口文件，设置vue.config.js的pages字段，以及部署后的线上运行效果。通过实例展示了alpha和beta两个入口的配置，确保每个入口都能正确加载对应的HTML和入口文件。项目源代码已上传至GitHub，供读者参考。

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

每个入口一般会有自己的html, main入口文件和内容模板。按照这个思路，我们先建立一个pages文件夹用来存放每个入口相关的文件。文件目录结构如下所示：

这里我们有alpha和beta两个入口，其中他们的html放在public文件夹下（参照脚手架生成的项目结构中index.html位置）。main作为入口文件我们可以打印一些信息来判断入口文件是否加载正确。这里我们看一下alpha的入口文件。

import Vue from 'vue'
import App from './alpha.vue'
import router from '../../router'
import store from '../../store'

Vue.config.productionTip = false
console.log('from alpha main.js')

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#alpha')

接下来我们需要配置vue.config.js文件的pages字段，把入口信息都放进去。如果你的项目没有vue.config.js就自己在项目根目录新建一个（和package.json同级，项目构建时会去加载vue.config.js的配置）。下面是笔者配置文件的内容：