脚本宝典收集整理的这篇文章主要介绍了

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 使用小结

全部内容,希望文章能够帮你解决

vue-cli 3.0 使用小结

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过