vue.png
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/
