vue-cli下區分開發環境和生產環境
阿新 • • 發佈:2020-12-25
原文: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