vue3.0 多页面指定打包文件夹或者修改默认打包public 文件夹
vue3.0 多页面指定打包文件夹或者修改默认打包public 文件夹起因在一个多页面项目中, 有pc端和移动端的单页面, 移动端会用到vconsole 和cordova.js 这样的库,而在pc 端却不需要所以想着,打包或者开发中,运行时,框架自动识别时pc端的项目还是 移动端的项目而且还可以根据环境变量等的配置的找到entry的入口。解决方案根据环境变量和vue3.0的mode 配置...
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 配置项 属性 ,
更多推荐
所有评论(0)