vue2之vue.config.js最全配置教程

vue.config.js 相当于之前的webpack 打包工具

配置目录:

const path = require(\'path\');

function resolve(dir) {
  return path.join(__dirname, dir)
}



module.exports = {

  productionSourceMap: false,// 生产环境是否要生成 sourceMap

  publicPath: \'./\',  //   部署应用包时的基本 URL

  outputDir: \'dist\',  //   打包时输出的文件目录

  assetsDir: \'assets\',  //   放置静态文件夹目录

  devServer:{},// dev环境下，webpack-dev-server 相关配置

  lintOnSave: false,//是否在开发环境下每次保存代码时都启用 eslint验证

  css:{},// css的处理

  chainWebpack：config=>{} //vue-cli内部的webpack配置

  pluginOptions:{},// 可以用来传递任何第三方插件选项

  

}

一 、 productionSourceMap

① productionSourceMap ：false;

作用 : 把productionSourceMap 置为false，既可以减少包大小，也可以加密源码。这样打包后文件小而且别人看不到你的源码了。

②productionSourceMap ：true;

作用 : 项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

二、 publicPath

项目打包时，打包出来的文件根目录，如果我们设置成“/”则我们打包后默认都是在dist目录下,假设我们设置成\"/app\"，我们所打包的dist目录下会生成一个app目录，打包后的资源文件都是在app目录下的，这是所有的静态资源都会找不到，所以我们一般都是设置成“/”的。

三、outputDir

项目打包时输出的文件目录，比如说设置成“dist”，那么我们打包后的目录名称就是“dist”，我们设置成“build”，打包后的目录名称就是“build”。

四、assetDir

我们放置静态资源的目录，项目刚创建时，默认都是asset，所以一般我们不会动，直接配置 assetDir:\"assets\"，当然，如果你不太习惯，也可以换成你想要的名字，只需要把目录名和这个名字时对应的,比如说你习惯用static，目录名称是static，那么这里就可以写成 assetsDir:\"static\"。

五、devServer

在dev环境下，webpck-dev-server的相关配置

devServer：{

port : 8080, //开发环境运行时的端口

https:false,//是否启用HTTPS协议

open:true, //项目运行成功后是否直接打开浏览器

hot:true,//是否开启热加载

overlay：true,//当出现编译错误或警告时，在浏览器中显示全屏覆盖。

proxy: {   //服务器代理

     \'/api\': {
        target: \"api-url\",   // 实际跨域请求的API地址
        secure: false,   // https请求则使用true
        ws: true,
        changeOrigin: true,  // 跨域
        // 请求地址重写  http://front-end/api/login ⇒ http://api-url/login
        pathRewrite: {
          \'^/api\': \'/\',
        }

    },


}

六、lintOnSave

前端程序员都会有一个通病，每次写完一点代码，哪怕写了一个单词，定义一个变量，都会习惯性的格式化一下代码，保存下代码，这个配置就是每次我们保存代码时，是否要经过esLint检查代码的，因为我个人不太习惯使用esLint,所以没有做过多了解，如果项目中有使用eslint的话，不想被检查到，就可以用，如果没有，可以不用写这个配置。

七、css的处理

css:{

loaderOptions：{

  less:{},

  scss:{},

  css:{}

 } 

}

①loaderOptions的作用：向 webpack 的预处理器 loader 传递选项。共享全局变量

②less的配置

less: {
       data:\"@import \"@/assets/styles/mixin.less\" // 把less文件注入全局，在全局可以直接使用
    }

③scss的配置

scss: {
   prependData: `@import \"@/assets/styles/theme.scss\";`//全局注入scss文件，可以在文件内编写scss代码
  }

④

css: {
   prependData: `@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别名为@
}

 还有很多基础配置，这些也是我比较常用的配置，大家可以做个参考，如果哪里有说的不对，欢迎指出！