vue-cli 3.0 使用小結

vue-cli 3.0 使用小結

我的使用 VUE-CLI 3.0 碰到一些問題,用做記錄

VUE-CLI 3.0 開始,配置文件改動較大,多數配置文件均在項目目錄下,vue.config.js文件內配置:

路徑別名

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set("@img", resolve("src/assets/img"))
      .set("@g", resolve("src/global"))
      .set("@c", resolve("src/components"))
      .set("@m", resolve("src/mixins"))
      .set("@v", resolve("src/views"))
      .set("@s", resolve("src/store"));
  }
};

別名 @爲 VUE 自帶默認配置(指向 src),無需配置

開啓 CSS 預處理器的 JAVASCRIPT

module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
};

注入 CSS 預處理器的全局變量

首先在項目安裝style-resources-loader,命令:vue add style-resources-loader
而後在vue.config.js文件下修改相應路徑

module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve(__dirname, "./src/....../base.less")]
    }
  }
};

熱更新問題

使用 NPM(或 yarn) 重裝依賴
屢次使用 CNPM 安裝後,控制檯無任何報錯,其餘運行都正常,但沒法自動刷新頁面

環境變量

在項目根目錄下,使用文件.env.mode名稱,文件內便可配置相應環境變量

.env                # 在全部的環境中被載入
.env.local          # 在全部的環境中被載入，但會被 git 忽略
.env.[mode]         # 只在指定的模式中被載入
.env.[mode].local   # 只在指定的模式中被載入，但會被 git 忽略

而後在文件內寫入:

NODE_ENV = 'production'
VUE_APP_MODEL = 'prod'

只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中。你能夠在應用的代碼中這樣訪問它們：console.log(process.env.VUE_APP_MODEL)

運行或者打包 VUE 項目時,使用--mode mode名稱切換環境

我的博客地址: https://anyclub.github.io/