vue 学习 cli3常用配置

---恢复内容开始---

cli3以后，构建的项目更加的简洁，配置文件也没有向cli2那样暴漏出来，但这并不代表cli3是不可配置的，我们只需要在根目录下添加一个vue.config.js作为项目的配置文件，就可以愉快的配置我们的项目了

 

以下就是本人常用的配置项，如果想了解更多的可以去https://cli.vuejs.org/zh/config/查看

 

let path = require("path");
module.exports = {
  // https://api.blockbcd.top/index/
  lintOnSave: false,//是否在每次保存时使用eslint检查，这个对语法的要求比较严格，对自己有要求的同学可以使用
  productionSourceMap: false,//不允许打包时生成项目来源映射文件，在生产环境下可以显著的减少包的体积
  //注 Source map的作用：针对打包后的代码进行的处理，就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。
  publicPath: "./",//配置为相对路径，这样打包之后的包才能正常使用
  css: {
    extract: true,//是否启用css分离插件，默认是true，如果不启用css样式分离插件，打包出来的css是通过内联样式的方式注入至dom中的，详细了解https://www.cnblogs.com/xiaokebb/p/8274889.html
    sourceMap: false,//效果同上
    modules: false,// // 为所有的 CSS 及其预处理文件开启 CSS Modules。
    // 这个选项不会影响 `*.vue` 文件。
  },
  devServer: { //配置开发服务器
    host: "0.0.0.0",
    hot: true,//是否启用热加载，就是每次更新代码，是否需要重新刷新浏览器才能看到新代码效果
    port: "8083",//服务启动端口
    open: false,//是否自动打开浏览器默认为false
    proxy: { //配置http代理
      "/@url": { //如果ajax请求的地址是https://api.yuming.com/api1那么你就可以在jajx中使用/@url/api1路径,其请求路径会解析
        // https://api.yuming.com/@url/api1，当然你在浏览器上开到的还是http://localhost:8080/@url/api1;
        target: "https://api.blockbcd.top/index/",
        changeOrigin: true,//是否允许跨域，这里是在开发环境会起作用，但在生产环境下，还是由后台去处理，所以不必太在意
        pathRewrite: {
          "/@url": "" // 把解析出来的接口地址中的多出来的@url替换成空字符，其目的就是去掉多余的它，不然地址上多了一个@url时无法正确访问的。
          //当然如果你的接口地址上本来就有@url，解析之后认识争取的
        }
      },
      "/url2": {//可以配置多个代理，匹配上那个就使用哪种解析方式
        target: "https://api2",
        // ...
      }
    }
  },
  pluginOptions: {
    'style-resources-loader': {//定义一个全局的less文件，把公共样式变量放入其中，这样每次使用的时候就不用重新引用了
      preProcessor: 'less',
      patterns: [
        './src/assets/public.less'
      ]
    }
  },
  chainWebpack(config) { //添加一个路径别名 假设有在assets/img/menu/目录下有十张图片，如果全路径require("/assets/img/menu/img1.png")
                         //去引入在不同的层级下实在是太不方便了，这时候向下方一样定义一个路劲别名就很实用了
    config.resolve.alias
      .set("assets", path.join(__dirname, "/src/assets"))//添加多个别名支持链式调用
      .set("img", path.join(__dirname, "/src/assets/img/menu"))//引入图片时只需require("img/img1.png");即可
  }
}

 

 

 

 

---恢复内容结束---