vue cli3 熱更新 保存時自動刷新頁面內容 + 分離環境變量.env package.json配置

前幾天ts+vue3.0+view-design擼了一個項目，而後總感受哪裏不對勁，今天終於醒悟了原來是熱更新沒開

在vue.config.js中配置如下選項

const IS_PRO = ['production', 'test'].includes(process.env.NODE_ENV);

css: {
        // 是否使用css分離插件 ExtractTextPlugin
        extract: IS_PRO,
        // 開啓 CSS source maps 打包時不生成.map文件?
        sourceMap: false,
        // css預設器配置項
        loaderOptions: {
        },
        // 爲全部的 CSS 及其預處理文件開啓 CSS Modules。
        // 這個選項不會影響 `*.vue` 文件。
        requireModuleExtension: true
    },

上文中用到了process.env環境變量，那麼這裏在安利一個知識點吧
package.json

"scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "build:dev": "vue-cli-service build --mode development",
        "lint": "vue-cli-service lint"
    },

環境變量存放地址

優先級.env<.env.any<.env.any.local （.local文件會被 git 忽略）

npm run serve 會默認找到.env.development文件配置
npm run build會默認找到.env.production文件配置

固然咱們能夠把本地的配置放置在.local內用於本地配置，而後對應的線上和測試環境放置不一樣的文件，打包上線時 對應的 npm run build --文件名稱就好了好比npm run build --development

vue-cli環境變量地址

• 點贊 1
• 收藏
• 分享
• • 文章舉報

晴天有點孤單

發佈了89 篇原創文章 · 獲贊 103 · 訪問量 13萬+

私信 關注