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 配置項 屬性 ，