Vue踩过的坑

Vue脚手架取消ESLint校验

ESLint是插件化的 JavaScript 代码检测工具，使用脚手架的时候会使用eslint来实现代码的质量检测，但是真正在书写代码的时候要时刻记住这些 “标准”可能有点难受，比如结尾不加分号，使用单引号，首行俩个空格缩进等

vue.config.js：

module.exports = {
   
    // 取消ESLint校验
    lintOnSave: false
}

自动修复ESLint语法格式

• npm run lint --fix
• yarn lint --fix

Vue cli3 bulid打包后dist文件夹下index.html打开为空白页问题的解决办法

'/' 指的是项目的根目录，'./' 指的是当前目录

vue.config.js：

module.exports = {
   
  // 配置项目打包之后静态资源存放的根URL，默认为'/'
  publicPath: './'
}

Vue中CSS @import用法后面的 ; 必须要有

@import "./App.css";
@import './App.less';

Vue取消less文件保存自动出现css文件

在Easy LESS插件的settings.json中添加如下代码：

"less.compile": {
   
    "compress": true, // 是否删除多余空白字符
    "sourceMap": false, // 是否创建文件目录树，true的话会自动生成一个.css.map文件
    "out": false, // 是否编译输出文件
}

Vue cli3 在写css或者less的时候无法自动刷新浏览器

extract默认开发环境下是false，生产环境下是true（是否将组件中的css提取至一个独立的CSS文件中而不是动态注入inline代码中）

在开发环境下提取CSS默认是不开启的，因为它和CSS热重载不兼容

Vue中去除编译后图片多余的hash值

vue.config.js

module.exports = {
   
  filenameHashing: false
}

Vue cli3打包之后路径引用问题

'/' 指的是项目的根目录，'./' 指的是当前目录，'../' 指的是上一层目录，../../ 指的是上二层的目录