1,vue.config.js
最近安装了下vue cli3版本, 和vue cli2 相比文件目录少了很多配置,没有了build和config目录,那么像vue cli2 之前的关于端口号的配置,打包之后路径的配置,图片的配置 等等,应该去哪里配置呢? vue cli3 可以在项目根目录新建一个vue.config.js文件(和package.json)平级,像之前的很多繁琐配置,都可以在这个文件里配置啦
注意:vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。
2,处理css预加载
比如使用less
1,可以在创建项目的时候选择使用的预处理器
2,如果创建项目的时候选的默认,内置的 webpack 仍然会被预配置为可以完成所有的处理,我们只需要手动安装处理预处理器的loader即可,比如:
# Sass
npm install -D sass-loader node-sass
# Less
npm install -D less-loader less
# Stylus
npm install -D stylus-loader stylus
3,导入相应的文件类型(例如less),比如在main.js中引入事先写好的style.less,在*.vue文件中这样来使用:
<style lang="less">
</less>
进阶:向预处理器loader传递选项
解决问题:比如向所有的less样式传入共享的全局变量,定义的less变量在variables.less文件中定义,如果每个less文件中都需要引入,就需要我们一个一个引入比较麻烦,通过配置vue.config.js
解决方法:配置vue.config.js文件中的css.loaderOptions选项
代码: