Vue CLI 系列之(二)配置文件
vue.config.js配置文件
脚手架是依托着webpack的,webpack有一个自己的配置文件【webpack.config.js】,而webpack.config.js这个文件是没有暴露出来的
Vue 脚手架隐藏了所有webpack 相关的配置,若想查看具体的webpack 配置, 使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
以脚手架默认的配置,下面这些我们是改不了的
如果想修改脚手架的默认配置,比如上面的内容,我们可以通过vue.config.js进行修改
vue.config.js:用于个性化定制脚手架,也就是修改脚手架的默认配置
该文件要放在与package.json同级的目录下
Vue.config配置项和vue.config.js文件的区别:
Vue.config:调整Vue这个库工作相关的东西
vue.config.js:调整脚手架的工作模式
vue.config.js中,可修改的内容参考官网:https://cli.vuejs.org/zh/config/
vue.config.js一旦修改,必须重新执行 npm run serve
Vue最终会把vue.config.js给webpack,webpack是基于Nodejs的,Nodejs中采用的模块化是commonjs的模块化,所以webpack中的模块化也是commonjs的模块化
Vue脚手架会把vue.config.js中的所有配置和webpack中的配置【webpack.config.js】进行合并,我们写在vue.config.js中的配置会替换掉webpack中对应的配置,以我们写的配置为主
比如我们要自定义入口文件,可以这么写
// vue.config.js
module.exports = {
pages: {
//要么直接不写vue.config.js这个文件,只要有这个文件,index的内容不能是空的
index: {
// page 的入口
entry: 'src/papa.js'
}
}
}
脚手架是包含语法检查的,保存文件后会自动进行语法检查,我们可以在vue.config.js中通过lintOnSave: false关闭语法检查
webpack中常见的进行语法检查的Loader:eslint、jslint、jshint