vue-cli@2.X中的配置

主要解决的是接口问题和路径问题

---

---

1. 后台配置了允许跨域时的配置步骤（侧重接口问题处理）

1.1 第一步: 在 /config/dev.env.js中添加如下代码:

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',

  // 添加下面这行代码: 表示在开发环境下请求的服务器端接口  
  API_ROOT: ' "http://localhost:3000/api" '   
})

1.2 第二步: 在 /config/prod.env.js 中添加如下代码:

module.exports = {
  NODE_ENV: '"production"',

  // 添加下面这行代码: 表示在生产环境下请求的服务器端接口  
  API_ROOT: ' "http://localhost:3000/api" '
}

1.3 第三步: 在发送axios请求之前，设置请求的基础URL即可

axios.defaults.baseURL = process.env.API_ROOT;

// 注意: process.env 是一个全局变量，可以判断当前的环境。

---

---

2. 后台未设置允许跨域请求时（侧重路径问题处理）

2.1 第一步: 在 /config/index.js中添加如下配置

module.exports = {
  dev: {

    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    // --------------新添加的代理内容-----------------------------
    // 原本proxyTable属性中对象为空，在此进行proxy代理配置（可以跨域）
    proxyTable: {
      '/api': {
        target: 'http://localhost:3000',   // target表示代理的服务器url
        pathRewrite: {     // pathRewrite表示路径重写，key表示一个正则，value表示别名 
          '^/api': '/api'   // 即用 '/api'表示'http://localhost:3000/api'
        }
      }
    },
    // ---------------------------------------------------------

    host: 'localhost', 
    port: 8080,   // 开启服务器的端口
    autoOpenBrowser: false,   // 是否开启在浏览器中打开
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, 
    devtool: 'cheap-module-eval-source-map',
    cacheBusting: true,
    cssSourceMap: true
  },

  build: {
  
    // build时输出的index.html文件，可以自定义路径
    index: path.resolve(__dirname, '../dist/index.html'),

    // build时输出的静态(除了index.html)资源路径
    assetsRoot: path.resolve(__dirname, '../dist'),

    // build时输出静态资源的二级目录
    assetsSubDirectory: 'static',

    // 代表打包后，index.html里面引用资源的的相对地址
    assetsPublicPath: './',

 
    // 是否开启cssSourceMap
    productionSourceMap: true,
    devtool: '#source-map',

    // 是否开启gzip
    productionGzip: false,

    // 需要用gzip压缩的文件扩展名
    productionGzipExtensions: ['js', 'css'],

    bundleAnalyzerReport: process.env.npm_config_report
  }
}

2.2 其余的配置步骤和后台允许跨域时的步骤相同

---

---

vue-cli@3.X中的配置

主要解决的同样是接口问题和路径问题

---

---

1. 后台配置了允许跨域时的配置步骤（侧重接口问题处理）

axios.defaults.baseURL = process.evn.NODE_ENV === 'development' ? 'devUrl' : 'propUrl'
/*
    参数解释:
        1. devUrl  :  开发环境中请求的后台url
        2. propUrl :  生产环境中请求的后台url
*/ 

---

---

2. 后台未设置允许跨域请求时（侧重路径问题处理）

2.1. 第一步: 接口配置同上

2.2. 第二步: 路径和axios配置如下:

2.2.1 在与package.json文件的同级目录下创建 vue.config.js, 内容如下:

详细参考见网址:

module.exports = {
  devServer: {
    publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
    proxy: {
      '/api': {
        target: '<url>',
        pathRewrite: {
            '^/api' : '/api'
        }
      },
      '/foo': {
        target: '<other_url>'
        pathRewrite: {
            '^/foo': '/foo'
        }
      }
    }
  }
}

/*
示例: 远程服务器未处理跨域，接口为: http://localhost:3000/api/
本地开发环境中的url为: http://localhost:8080
1.  proxy: {
2.    '/api5': {
3.        target: 'http://localhost:3000',
4.        pathRewrite: {
5.            '^/api5' : '/api'
6.        }
7.     }
8.   } 
其中
第2行中的 '/api5'是自定义的本地请求时的名字
第3行的target表示代理的服务器url
第4行的pathRewrite表示路径重写
第5行的'^/api5'是一个正则表达式，表示要匹配请求的url中，全部'http://localhost:8080/api5' 转接为 http://localhost:3000/api/
*/

---

---