vue-cli 3.0 使用小结

![vue.png](https://upload-images.jianshu.io/upload_images/15070436-7bcb34dd6cdb7ea2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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/

脚本宝典为你提供优质服务
脚本宝典 » vue-cli 3.0 使用小结

发表评论

提供最优质的资源集合

立即查看 了解详情