vue-cli脚手架项目中有用的配置前后端分离项目,在和后台调试接口难免会遇到跨域问题,通过配置 proxyTable

前端跨域代理配置

前后端分离项目,在和后台调试接口难免会遇到跨域问题,通过配置 proxyTable 可以很好的解决跨域问题.

// /config/index.js
proxyTable: {
  '/api': {
    target: 'http://www.yourdomain.com',  // 接口域名1
    changeOrigin: true,  //是否跨域
    pathRewrite: {
      '^/api': ''   //需要rewrite重写的,
    }
  }
}

配置代理后,需要重启项目,配置才能生效

配置完成后,需要完整路径如: http://www.yourdomain.com/user/login 请求的接口,需要改为 /api/user/login既可请求

静态资源打包配置

有时候,项目开发完成后,静态资源需要放到单独的 cdn 服务器下时,这时候 /config/index.js下的配置可以直接完成需求.

代码片段如下:

build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    // 指定打包后的静态文件目录
    assetsSubDirectory: 'static',
    // 打包后,index.html中引入资源的相对地址
    assetsPublicPath: 'http://www.yourdomain.com/'
}