vue 多環境打包

除了 VUE_APP_* 變量之外，在你的應用代碼中始終可用的還有兩個特殊的變量：

• NODE_ENV - 會是 "development"、"production" 或 "test" 中的一個。具體的值取決於應用運行的模式。
• BASE_URL - 會和 vue.config.js 中的 publicPath 選項相符，即你的應用會部署到的基礎路徑。

https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F

模式

模式是 Vue CLI 項目中一個重要的概念。默認情況下，一個 Vue CLI 項目有三個模式：

• development 模式用於 vue-cli-service serve

• production 模式用於 vue-cli-service build 和 vue-cli-service test:e2e

• test 模式用於 vue-cli-service test:unit

package.json默認配置

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

改為 
"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "test": "vue-cli-service build --mode test",
    "build": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },

--mode XXX 和下面新建的.env.XXX一一對應。

新建.env.development .env.test .env.production

注意：

1. .env.development .env.test .env.production修改了都要重啟服務。

2. vue項目中任意位置可以通過process.env.NODE_ENV 和process.env.VUE_APP_ENV來訪問變量

// .env.development
NODE_ENV='development'
#本地開發模式
# 變量must start with VUE_APP_  
VUE_APP_ENV = 'development'


//.env.test 測試環境配置 是NODE_ENV=production 不是test
NODE_ENV='production'
#打包到測試環境
# must start with VUE_APP_  
VUE_APP_ENV = 'test'


//.env.production 正式環境配置
NODE_ENV='production'
#打包到線上環境
VUE_APP_ENV = 'production'

 

 

#env.development.js
// 本地環境配置
module.exports = {
  title: 'vue-h5-template',
  baseUrl: 'http://localhost:9018', // 項目地址
  baseApi: 'https://test.xxx.com/api', // 本地api請求地址,注意：如果你使用了代理，請設置成'/'
  APPID: 'xxx',
  APPSECRET: 'xxx',
  $cdn: 'https://imgs.solui.cn',
  desc:'本地開發環境'
}


#env.test.js 測試
module.exports = {
  title: 'vue-h5-template',
  baseUrl: 'https://test.xxx.com', //test 測試項目地址
  baseApi: 'https://test.xxx.com/api', //test 測試api請求地址
  APPID: 'xxx',
  APPSECRET: 'xxx',
  $cdn:'https://imgs.solui.cn',
  desc:'測試環境'
}

#env.production.js // 正式

module.exports = {
  title: 'vue-h5-template',
  baseUrl: 'https://www.xxx.com/', // 正式項目地址
  baseApi: 'https://www.xxx.com/api', // 正式api請求地址
  APPID: 'xxx',
  APPSECRET: 'xxx',
  $cdn:'https://imgs.solui.cn',
  desc:'線上環境'
}


index.js
// 根據環境引入不同配置 process.env.NODE_ENV=development|test|production
const config = require('./env.' + process.env.VUE_APP_ENV)
module.exports=config



// 根據環境不同引入不同baseApi地址 如App.vue中
// import config from "@/config"; import也可以 但是畢竟是module.export導出的所以用require()接收
const { title, baseUrl, baseApi, desc } = require("@/config");
console.log(process.env.NODE_ENV);
console.log(title);
console.log(baseUrl);
console.log(baseApi);
console.log(desc);

在axios中使用 import config from "@/config";
import axios from 'axios'
import store from '@/store'
import { Toast } from 'vant'
// 根據環境不同引入不同api地址
const { title, baseUrl, baseApi, desc } = require("@/config");
// create an axios instance
const service = axios.create({
  baseURL: baseApi, // url = base api url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})
...

 

#main.js
// 設置 js中可以訪問 $cdn
// 引入cdn
const { $cdn } = require('./config')
Vue.prototype.$cdn = $cdn

 

#vue.config.js
// 設置 css中可以訪問 $cdn
const path = require("path");
const config=require('./src/config')
css: {
    // 是否使用css分離插件 ExtractTextPlugin
    extract: true,
    // 開啟 CSS source maps?
    sourceMap: false,
    // css預設器配置項
    loaderOptions: {
      // // 注入 `sass` 的全局變量，以后vue頁面直接使用無需引用。, $cdn可以配置圖片cdn
      scss: {
        prependData: `
        @import "./src/styles/main.scss";
        $cdn: "${config.$cdn}";
     
        `
      }
    },
    // 啟用 CSS modules for all css / pre-processor files.
    modules: false
  },

<script>
    //在js中使用圖片地址
  console.log(this.$cdn) //是因為 Vue.prototype.$cdn = $cdn
</script>
<style lang="scss" scoped>
    //在css中使用圖片地址
  .logo {
    width: 120px;
    height: 120px;
    background: url($cdn + '/weapp/logo.png') center / contain no-repeat;
      //是因為vue.config.js  $cdn: "${config.$cdn}";
  }
</style>