https://vue-docs-next-zh-cn.netlify.app/guide/template-syntax.html#%E5%8E%9F%E5%A7%8B-html
重要 https://www.cnblogs.com/coober/p/10875647.html
填加iview按需引入 https://www.yuque.com/wangchengyi-p5qrg/kb/aks5sa
重要重要 https://juejin.cn/post/6844904033782611976
封裝axios銜接上面一條 https://www.cnblogs.com/panax/p/10942889.html
六、打包配置
在實際項目的開發中，我們一般會經歷項目的開發階段、測試階段、預發布階段和最終上線階段，每一個階段對於項目代碼的要求可能都不盡相同，那么我們如何能夠游刃有余的在不同階段下使我們的項目呈現不同的效果，使用不同的功能呢？這里就需要引入環境的概念。作為一名開發人員，我們可能需要針對每一種環境編寫一些不同的代碼並且保證這些代碼運行在正確的環境中，這就需要我們進行正確的環境配置和管理。
一般一個項目都會有以下 4 種環境：
- 開發環境（開發階段，本地開發版本，一般會使用一些調試工具或額外的輔助功能）
- 測試環境（測試階段，上線前版本，除了一些 bug 的修復，基本不會和上線版本有很大差別）
- 預發布環境（即將上線階段，上線前版本，預測線上出現問題的可能性，和上線版本無差別）
- 生產環境（上線階段，正式對外發布的版本，一般會進行優化，關掉錯誤報告）
有關環境變量的注意事項：
- 環境文件放置根目錄下
- 環境名應該與環境文件統一
- 除了 baseUrl 和 NODE_ENV 其他環境變量使用VUE_APP開頭
在項目的根目錄新建4個文件夾，分別對應開發環境（.env.dev），測試環境（.env.test），預發布環境（.env.pre），生產環境（env.prod）
.env.dev文件內容如下：
NODE_ENV = 'development' VUE_APP_CURRENTMODE = 'dev' VUE_APP_BASEURL = '本地開發api地址'復制代碼.env.test文件內容如下：
NODE_ENV = 'test' VUE_APP_CURRENTMODE = 'test' VUE_APP_BASEURL = '測試環境api地址'復制代碼.env.pre文件內容如下：
NODE_ENV = 'pre-release' VUE_APP_CURRENTMODE = 'pre' VUE_APP_BASEURL = '預發布環境api地址'復制代碼env.prod文件內容如下：
NODE_ENV = 'production' VUE_APP_CURRENTMODE = 'prod' VUE_APP_BASEURL = '正式環境api地址'復制代碼package.json配置：
"scripts": { "dev": "vue-cli-service serve", "build:test": "vue-cli-service build --mode test", "build:per": "vue-cli-service build --mode pre-release", "build:prod": "vue-cli-service build --mode production", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },復制代碼最后根據上面的配置進行打包：
- npm run dev //本地運行
- npm run build:test //測試環境打包
- npm run build:pre //預測試環境打包
- npm run build:prod //正式環境打包
注意：
在vue.config.js使用 proccess.env.NODE_ENV 進行訪問就可以了
// vue.config.js console.log(process.env.NODE_ENV); // development（在終端輸出）復制代碼當你運行 npm run dev命令后會發現輸出的是 development，因為 vue-cli-service serve 命令默認設置的環境是 development，你可以修改 package.json 中的 dev 腳本的命令為：
"scripts": { "dev": "vue-cli-service serve --mode test", } // --mode test其實就是修改了 webpack 4 中的 mode 配置項為 test，同時其會讀取對應 .env.[model]文件下的配置 // 如果沒找到對應配置文件，其會使用默認環境 development // 同樣 vue-cli-service build 會使用默認環境 production只要以 VUE_APP_ 開頭的變量都會被 webpack.DefinePlugin 靜態嵌入到客戶端的包中。你可以在應用的代碼中這樣訪問它們，例如我在@/api/index.js中初始化axios：
const $axios = axios.create({ timeout: 30000, // 基礎url，會在請求url中自動添加前置鏈接 baseURL: process.env.VUE_APP_BASE_API })