vue3.0 多页面指定打包文件夹或者修改默认打包public 文件夹

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 配置项 属性 ，