1. 程式人生 > 其它 >vue-cli下區分開發環境和生產環境

vue-cli下區分開發環境和生產環境

原文:https://www.cnblogs.com/ysla/p/11746356.html

package.json中

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "serve-prod": "vue-cli-service serve --mode development_prod",
    "build": "vue-cli-service build --mode production",
    "build-prod": "vue-cli-service build --mode production_prod",
    "lint": "vue-cli-service lint"
}

建立以下4個檔案

.env.development中,定義開發環境下用的測試伺服器的介面地址

NODE_ENV='development'
VUE_APP_HOST="api介面地址"
VUE_APP_HOST_FILE='檔案儲存地址'

.env.development_prod中,定義開發環境下用的正式伺服器的介面地址

NODE_ENV='development'
VUE_APP_HOST="/api/"
VUE_APP_HOST_FILE="/"

.env.production中,定義生產環境下測試伺服器的介面地址

NODE_ENV='production'
VUE_APP_HOST='api介面地址',
VUE_APP_HOST_FILE='檔案儲存地址'

.env.production_prod中,定義生產環境下正式伺服器的介面地址

NODE_ENV='production'
VUE_APP_HOST='/api/',
VUE_APP_HOST_FILE='/'

config.js中使用時

const config = {
    host: process.env.VUE_APP_HOST,
    hostfile: process.env.VUE_APP_HOST_FILE
}
export default config