vue 多页面打包

vue3.0 多页面指定打包文件夹或者修改默认打包public 文件夹
起因
在一个多页面项目中，有pc端和移动端的单页面，移动端会用到vconsole 和cordova.js 这样的库，而在pc 端却不需要

所以想着，打包或者开发中，运行时，框架自动识别时pc端的项目还是移动端的项目而且还可以根据环境变量等的配置的找到entry的入口。

解决方案
根据环境变量和vue3.0的mode 配置entry 入口
你需要了解的知识
vue.3.0的环境变量和模式（可以去官网了解）

package.json的设置
"start": "vue-cli-service serve",
"build:pc": "vue-cli-service build --mode pc",
"build:mobile": "vue-cli-service build --mode mobile",

对应的env 文件命名
.env
.env.pc
.env.mobile

.env 文件内容
NODE_ENV='development'
# PC端
BUILD_MODE='pc'
# 移动端
BUILD_MODE='mobile'

.env.pc 文件内容
NODE_ENV='production'
BUILD_MODE='pc'

.env.mobile 文件内容
NODE_ENV='production'
BUILD_MODE='mobile'

然后你就可以在vue.config.js 中写逻辑来，根据环境变量 NODE_ENV 和BUILD_MODE 来配置entry 了

也可以像下面一样，起一个pageConfig 的文件夹，专门对页面入口，模板等做配置，然后环境变量BUILD_MODE的值就是文件夹名

参考代码

let pages = require('./pageConfig/' + process.env.BUILD_MODE)

pc 文件夹内容

module.exports = {
pc: {
entry: './src/pages/pc/index/index.js',
filename: 'index.html',
title: '首页'
}
}
指定文件打包目录
如果你顺利的完成了上一个章节的内容，你可能会遇到这个问题，当你上pc端生产环境时，会发现dist文件夹中包含着移动端的js库或者或者一些移动端的代码，这时你不需要的。你肯定会去找或者想如何指定文件夹进行打包，生成dist?

解决
建立两个目录

pc 打包目录

— pc_public

— index.html

– fullpage.js（pc端需要的一些库）

— public

—index.html

—vconsole.js ( 移动端需要的一些库)

vue.config.js添加如下代码

chainWebpack: config => {
console.log(config.plugin('copy'))
config.plugin('copy')
.tap(args => {
args[0][0].from = path.resolve('./pc_public')
return args
})

其实就是在vue.config.js改变配置webpack打包的插件copyde 配置项属性，

链接：vue3.0 多页面指定打包文件夹或者修改默认打包public 文件夹_舰行天下的博客-CSDN博客