vue3多页面运行与打包

前言

现实应用环境，会有使用vue开发多页面环境的需求，这些页面拥有共同的依赖，但是却又都是独立的，为了实现vue的多页面打包，可以使用webpack，同时又因为vue-cli自带了webpack，所以我们还可以采用vue-cli本身的配置文件进行多页打包 *** 作。

VUE3多页面打包

方式一：webpack配置

webpack安装参考：[安装 | webpack 中文网]。

直接在packagejson同级目录下创建webpackconfigjs(创建一个webpack的配置文件即可)，然后在配置文件内输入内容：

方式二：vue-cli配置

vue-cli目前已不提供vueconfigjs配置文件，但是我们可以手动在packagejson同级目录创建一个，创建成功后此文件将作为优先调用对象，结构与内容同webpack类似（其实就是内置的webpack配置），可参考官网配置解释：配置参考 | Vue CLI：

vue3多页面直接运行

使用vueconfigjs配置好后，直接使用npm run dev命令即可，对应vue的vue-cli-service serve，运行可根据pages定义的key值进行路由调用页面，key值为index那么调用格式就是/index,默认页面是index路由对应页面。如果采用webpack打包是无法直接运行多页面的，需要在打包后部署到服务器上。

---