??最近小咸兒一直在學習有關Vue的東西，所以將最近在弄得東西總結下來，以供參考。

??Vue配置環境變量和模式，可以分為兩種模式：

??第一種：Vue項目搭建成功后，config和build文件夾都存在
????
??知道有這兩個文件夾后，接下來就該配置環境變量以及對應的模式了。

??首先，看一下package.json中配置的啟動方式：

??從中，可以看出使用npm run dev啟動項目時，dev走的文件是build下面的webpack.dev.conf.js文件

??那么，我們去看一下webpack.dev.conf.js文件中是如何配置的

??這時，可以發現最終尋找的文件是config/dev.env文件

??知道這一點之后，我們就可以在config/dev.env文件中將我們想要切換的開發模式以及對應的地址放入其中了：

'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env')module.exports = merge(prodEnv, {NODE_ENV: '"development"',KERNEL: "'http://192.******/kernel-web'", })

??在具體使用的文件中，想要獲取環境變量，按照如下填寫：

// 定義kernel服務環境變量kernel: '',// 獲取環境變量地址this.kernel = process.env.KERNEL// 打印出來就可以發現是開發地址Console.log(this.kernel)

??這時候開發地址和環境變量就配置好了，生產環境和測試環境與此類同

• 1、 在package.json中添加prod和test，分別對應webpack.prod.conf.js和webpack.dev.test.js即可
  
• 2、在build文件夾中添加對應的webpack.prod.conf.js和webpack.dev.test.js，其中test文件復制prod文件即可。
  
• 3、將對于的config文件中的prod.env和test.env文件補全

??prod.env文件:

'use strict' module.exports = {NODE_ENV: '"production"',KERNEL: "'https://******/kernel-web'" }

??test.env文件：

'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env')module.exports = merge(prodEnv, {NODE_ENV: '"test"',KERNEL: "'http://192.******/kernel-web'" })

??最終，在使用不同的啟動命令時，可啟動不同的環境

• 生產：npm run prod
• 開發：npm run dev
• 測試：npm run test

??第二種：如何移除了這兩個配置文件夾目錄后該如何配置環境變量和模式呢？

??模式是 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

??然后在根目錄下創建.env.development文件，在文件中填寫如下內容：

VUE_APP_URL = http://192.******/kernel-web

??在實際運用的頁面中添加如下代碼：

let temUrl = process.env.VUE_APP_URL console.log(temUrl)

??即可拿到對應的環境地址，將生產環境和測試環境參照開發創建.env.production和.env.test。

??與此同時，還需要修改package.json文件：

"scripts": {"dev": "vue-cli-service serve --open","build": "vue-cli-service build","lint": "vue-cli-service lint","test:unit": "vue-cli-service test:unit","test:e2e": "vue-cli-service test:e2e"}

??你可以通過傳遞 --mode 選項參數為命令行覆寫默認的模式。例如，如果你想要在構建命令中使用開發環境變量，請在你的 package.json 腳本中加入：

"dev-build": "vue-cli-service build --mode development",

??參考材料：

??環境變量和模式
??vue-cli3.0 環境變量與模式

總結

以上是生活随笔為你收集整理的Vue2切换生产环境、测试环境和开发环境的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。