- 在根目錄下新建三個
.env
文件
NODE_ENV=dev
VUE_APP_URL=http://192.168.14.22
NODE_ENV=prod
VUE_APP_URL=https://www.baidu.com
NODE_ENV=test
VUE_APP_URL=https://test.baidu.com
分別對應以上三個文件本地環境、正式環境 和 測試環境
- 在
vue.config.js
文件中配置相應的變量,不同的環境打包進不同的文件夾。(此操作可不寫)
module.exports = {
lintOnSave: false,
outputDir: `dist-${process.env.NODE_ENV}`
}
- 在
package-lock.json
文件中的script
標籤中添加
scripts": {
"serve": "vue-cli-service serve --mode dev",
"build.test": "vue-cli-service build --mode test",
"build": "vue-cli-service build --mode prod"
},
驗證************************************
在main.js
中 console.log(process.env.VUE_APP_URL)
去控制檯看結果
npm run build.test
或 yarn build.test
命令打包查看生成的文件名 分別查看控制檯的打印結果