vue.config.js 笔记

• 添加别名

const path = require('path');
function resolve (dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    lintOnSave: true,
    chainWebpack: (config)=>{
        config.resolve.alias
            .set('@', resolve('src'))
            .set('assets',resolve('src/assets'))
            .set('components',resolve('src/components'))
            .set('layout',resolve('src/layout'))
            .set('base',resolve('src/base'))
            .set('static',resolve('src/static'))
    }
}

• 设置跨域代理
  相当于启动一个本地的web服务器，将前端的静态资源都在这个服务器上，服务器对服务器是没有资源跨域限制，只有浏览器才有这个限制，所以通过代理服务器将请求服务器可以绕过跨域的限制

    host:'localhost',//服务器
    port:8080,//端口号
    https:false,// 是否使用https
    open:false //是否自动启动浏览器
    proxy:'http://localhost:8080'//配置产生跨域时的代理服务器,服务器会将任何未知请求 (没有匹配到静态文件的请求) 代理到这里。
    //如果要配置多个代理
    proxy:{
        '/api':{
            target:'url',//要访问的接口的域名
            ws:true,//是否启用websockets
            changeOrigin:true,//开启跨域代理,在本地会创建一个虚拟服务器,然后发送请求的数据,并接受返回的数据,这样就不会产生跨域问题
            pathRewrite:{
                '^/api':'' // 重写路径，前端代码中的请求/api/user/info改写成/user/info,实际就是去掉/api
            },
         '/foo':{
              //配置另外一个代理,上面的代理使用的是'/api',这个是'/foo',可以设置多个代理
          }
        }
    }

• sass 全局变量引入方法一
  使用css.loaderOptions
  此处友情提示 sass-loader v7 之前使用 data：‘’ 之后使用prependData：‘’请根据项目sass-loader版本选择
  重点提示！！！！ 引用处分号“；”不能缺少，缺少直接报错，因为此方法是直接插入语句块至项目中使用sass语法的标签内，sass语法强制必须使用分号“；”结尾，更详细讲解请参考vue-cli官方文档。

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // data：`@import "~@/assets/variable.scss";` v7之前使用 的是data，现在改成了prependData
        prependData: `@import "~@/assets/variable.scss";`
        /* prependData: `
              @import "~@/assets/variable.scss";
              @import "~@/assets/variable2.scss";
          ` */
      }
    }
  }
}