Vue多页面应用配置

最近由于工作驱动，项目包含pc端及mobile端，pc端和mobile端核心功能一致，最大的不同是UI,为了减少维护的成本，决定使用Vue的多页面开发。

项目线上部署在一个子目茄桐录下，为了解决在本地和线上路径保持一致，需要修改一些配置。所以以此篇文章来记录一下配置过程中的问题。

这里是我放在github上的项目，里面有整个配置文件。感兴趣的颤闭坦朋友可以参考一下： vue-multiple-page

此篇文章记录了先在根路径下的多页面配置，再从根路径修改成子路径的配置

vue脚手架vue-cli3及以上；

在本地用vue-cli新建一个项目；

vue3.js :路由配置修改的是 history: createWebHistory('/mobile/')

vue3.js :路由配置修改的是 history: createWebHistory('/e/')

mobile端mobile.js的base修改成 base: '/e/mobile'

vue3.js :路由配置修改的是 history: createWebHistory('/e/mobile')

特别注意的地态闭方

前言

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

VUE3多页面打包

方式一：webpack配置

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

直接在package.json同级目录下创建webpack.config.js(创建一个webpack的配置文件郑正即可)，然后在配置文件内输入内容：

方式二：vue-cli配置

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

vue3多页面直接运行

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

vue脚手架创建的应用默认都是单页面的SPA，若需要开发多页面应用，需要自己手动配置。其实本质上就是将默认生成的这些文件(index.html、main.js、App.vue)当作一个页面，复制一份改改名字和旅带基本内容作为另一个页面。

1、方便管理 在src新建pages目录 然后pages下建各个页面对应的文件夹 如：

1、首先将封装的方法放在 build/utils.js 文件中

2、在webpack.base.conf.js中通过方法获取入口文件

3、修改开发和打包环境的配置文件，在plugins数组后使用concat拼接HtmlWebpackPlugin插件的配置

脚手架3配置多页面 和脚手架2差不多文件夹分类同脚手架2，只是脚手架3以上将配置文件隐藏起来了，步骤稍微不同

项目根目录新建vue.config.js文件，将配置放置于此文件中

也是通过封装拆亮芦的函数方法自动键帆获取对应文件夹下的文件 作为入口文件

---