零碎东西记录(项目配置有关)

112 阅读3分钟

.env .env.development .env.production文件

  .env 无论开发环境还是生产环境都会加载的配置文件
  .env.development 开发环境加载的配置文件
  .env.production 生产环境加载的配置文件
  配置文件里的属性名必须以`VUE_APP_`开头,例如:VUE_APP_QQQ = `QQ`
  然后就可以在代码中这样引用:process.env.VUE_APP_QQQ  // -> `QQ`
  a、根据Node环境变量'NODE_ENV'的值来选择加载'development'还是'production'
  b、比如我们平常通过`npm run serve`启动时,我们本地系统的环境变量`NODE_ENV` 值
  默认是`development`,这时就会先后加载`.env``.env.development`这两个件。
  c、而当我们打包到服务器后,服务器的`NODE_ENV`值一般为`production`,则此时Vue仍
  会先加载`.env`文件,然后加载`.env.production`文件。
  d、其次,在按顺序加载文件时,`Vue`会把后一个加载的文件内容和前面加载的文件内
  容进行比较,如果存在变量名相同,那么它会`采用后一个文件里的变量值为变量的最终值`

查看项目的环境变量

NODE_ENV:主要用于标识当前的环境(生产环境,开发环境),默认是没有这个环境变量的,需要自己手动配置。

image.png

proxy代理

target : 代表监测到以 /abc 开头的接口后,把axios请求中前面的本地服务器地址改为后端接口地址
changeOrigin : 是否跨域
ws : 如果要代理 websockets,配置这个参数
secure : 如果是https接口,需要配置这个参数(如果是http接口,也可以不写这个参数)
pathRewrite :替换请求中匹配的内容。
使用axios进行前设置(适用于target相同的代理)
例:axios.defaults.baseURL = "/api"(只要发送axios请求,就在请求前加入/api的开头)

vue配置不同环境(package.json)

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "test": "vue-cli-service serve --mode test",
    "production": "vue-cli-service serve --mode production" ,
    "build":"vue-cli-service build --mode development",
    "prodbuild":"vue-cli-service build --mode production",
    "testbuild":"vue-cli-service build --mode test"
  },
  //development、test、production对应的.env文件

vue.config.js 的 devServer

1、设置 host 选项,指定主机;如果设置为 "localhost",则只能被本机访问;
如果想要被外部访问,则需设置为 "0.0.0.0"2、设置 port 选项,指定一个端口号,并监听来自这个端口的请求;
3、设置 https 选项,false 表示使用 HTTP;
4、设置 open 选项,true 表示启动应用之后自动打开默认浏览器。
5、disableHostCheck:true 是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查。
6、hot: true, 开启热加载
7、compress:配置是否启用 gzip 压缩。boolean 为类型,默认为 false

axios拦截器

//在请求或响应被 then 或 catch 处理前拦截它们。
//1、请求拦截器
request.interceptors.request.use(function (conf) {
  const orgId = getOrgId()
  const orgName = getOrgName()
  conf.headers['Content-Type'] = 'application/json'
  if (orgId) {
    conf.headers['x-auth-org-id'] = orgId
    conf.headers['x-gasc-uid'] = getUuid()
  }
  if (orgName) {
    conf.headers['x-auth-org-name'] = Base64.encode(orgName)
  }
  if (!conf.hideLoading) {
    commonLoading.show('拉取数据中,请稍候...')
  }
  if (conf.cancel) {
    conf.cancelToken = new axios.CancelToken((cancel) => {
      window.__axiosArr.push({
        cancel
      })
    })
  }
  return conf
})
//2、响应拦截器
request.interceptors.response.use(resolve, reject)
function resolve(res) {
  const data = res.data || {}
  if (res.config && !res.config.hideLoading) {
    commonLoading.hide()
  }
  if (
    +data[config.apiReturnDefine.errcode] !== 0 &&
    +data[config.apiReturnDefine.errcode] !== 200
  ) {
    const errorCode = data[config.apiReturnDefine.errcode] || ''
    if (res.status === 200 && errorCode === '') {
      return {
        errcode: 0,
        errmsg: 'SUCCSS',
        data,
      }
    }

    // 调试模式下,非0统一提示
    if (config.debugModel) {
      console.warn(
        '接口非0啦!错误信息看这里!',
        '\n responseURL:',
        res.request.responseURL,
        '\n data: ',
        res.data,
        '\n all message: ',
        res
      )
    }
    return Promise.reject(data)
  }
  if (typeof data[config.apiReturnDefine.data] !== 'undefined') {
    return data[config.apiReturnDefine.data]
  }
  return data
}

// 失败,一般是网络错误
function reject(error) {
  if (error.config && !error.config.hideLoading) {
    commonLoading.hide()
  }
  console.error('=====> response error: ', error.response)
  return Promise.reject(error)
}

axios

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
处理并发请求的助手函数:
axios.all(iterable)、axios.spread(callback)
axios.all([fn1(),fn2()]).then((fn1,fn2)=>{
    console.log(res1,res2)//res1为fn1函数的返回值,res2为fn2函数的返回值
})
axios.all()、axios.spread()这两个函数来处理多个请求,该方法是axios的静态方法,不是axios实例方法!
axios.create([config]):
`url` 是用于请求的服务器 URL
`method` 是创建请求时使用的方法
`baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL`headers` 是即将被发送的自定义请求头
`maxRedirects` 定义在 node.js 中 follow 的最大重定向数目,如果设置为0,将不会 follow 任何重定向
`params` 是即将与请求一起发送的 URL 参数,无格式对象(plain object)或 URLSearchParams 对象
`data` 是作为请求主体被发送的数据,只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'