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 忽略

然后在文件内写入:

1 2	NODE_ENV = 'production' VUE_APP_MODEL = 'prod'

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：console.log(process.env.VUE_APP_MODEL)

运行或者打包 VUE 项目时,使用--mode mode名称切换环境