vueconfigjs配置css,vue的config文件夹
本文主要介绍vue2最全的配置教程vue.config.js，通过示例代码非常详细的介绍，对大家的学习或者工作有一定的参考价值。有需要的朋友下面和边肖一起学习。
目录
配置目录：一、productionSourceMap II、publicPath III、outputDir IV、assetDir V、devServer VI、lintOnSave VII、css处理VIII。chainWebpackvue.config.js相当于之前的webpack打包工具。
配置目录：
const path=require( path )；
函数解析(目录){
返回path.join(__dirname，dir)
}
模块.导出={
ProductionSourceMap: false，//是否要在生产环境中生成SourceMap？
公共路径：“”。/，//部署应用程序包时的基本URL
OutputDir: dist ，//打包时输出的文件的目录。
Assetdir: assets ，//放置静态文件夹目录
DevServer:{}，//dev环境，web pack-dev-服务器相关配置
LintOnSave: false，//是否希望每次在开发环境中保存代码时都启用eslint验证？
Css:{}，//css处理
chain webpack:config={ }//vue-CLI中的Web pack配置
PluginOptions:{}，//可以用来传递任何第三方插件选项。
}
一 、 productionSourceMap
production source map:false；
函数：将productionSourceMap设置为false不仅可以减小包的大小，还可以对源代码进行加密。这样文件很小，别人看不到你的源代码。
production source map:true；
功能：项目打包后，代码全部压缩加密。如果在运行时报告了一个错误，输出的错误消息不能准确地知道代码在哪里报告了错误。有了map，就可以准确输出哪一行哪一列是错的，就像未加密的代码一样。
二、 publicPath
打包一个项目时，如果我们将打包文件的根目录设置为“/”，默认情况下会在dist目录下。假设我们设置为“/app”，在我们打包的dist目录下会生成一个app目录，所有打包的资源文件都在app目录下，不会被所有静态资源找到，所以我们通常设置为“/”。
三、outputDir
举个例子，如果项目的输出文件目录设置为“dist”，那么我们打包的目录名称就是“dist”，我们设置为“build”，打包的目录名称就是“build”。
四、assetDir
我们放置静态资源的目录，在项目刚创建的时候，默认总是asset，所以一般不移动，直接配置assetDir:assets 。当然，如果你不习惯，也可以改成你想要的名字。你只需要把这个名字对应的目录名。比如你习惯用static，目录名是static，那么这里可以写成assetsDir:static 。
五、devServer
开发环境中webpck-dev-server的相关配置
devServer:{
端口：8080，//开发环境运行时的端口
HTTPS:false，//是否启用了HTTPS协议
Open:true，//项目运行成功后直接打开浏览器？
Hot:true，//开启热加载？
Overlay: true，//出现编译错误或警告时，在浏览器中全屏显示Overlay。
代理：{//服务器代理
/api: {
Target: api-url ，//实际跨域请求的api地址
Secure: false，//https请求使用true。
ws:没错，
ChangeOrigin: true，//跨域
//请求地址重写http://前端/API/login3358api-url/login
路径重写：{
^/api: /，
}
},
}
六、lintOnSave
前端程序员总有一个通病。他们每写一点代码，哪怕写一个字，定义一个变量，都会习惯性地把代码格式化保存。这个配置就是我们每次保存代码时是否都要通过esLint检查代码。因为个人不习惯用esLint，所以没怎么了解过。如果项目中用了eslint，我不想被查，我可以用。如果没有，我可以用。
七、css的处理
css:{
loaderOptions:{
减去：{}，
scss:{}，
css:{}
}
}
loader options的功能：将选项传递给webpack的预处理器加载器。共享全局变量
配置较少
减：{
数据： @ import @/assets/styles/mixin . less //将less文件注入整个世界，直接在整个世界使用。
}
脊髓干细胞的配置
scss: {
prepend data:` @ import @/assets/styles/theme . scss ；`//全局注入scss文件，可以在文件中编写scss代码。
}
css: {
prepend data:` @ import @/assets/styles/reset . CSS ；`//全局注入scss文件，可以在文件中写css代码。
}
八、chainWebpack
CLI内部webpack配置将通过webpack-merge合并到最终webpack配置中，可以用两种方式编写。以及函数和对象的形式。在这里，我只介绍函数的常用形式。
chainWebpack:config={
const types=[vue-modules ， vue ， normal-modules ， normal ]；
Config.resolve.alias.set (@ ，resolve( src )//将src别名配置为@
}
基本配置很多，这些也是我比较常见的配置。可以做个参考。
关于vue2的vue.config.js最全配置教程的这篇文章到此为止。更多vue.config.js的相关配置内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。