vue代理配置

对于调试阶段，需要多个服务之间进行api调用，配置代理可以方便的解决该问题；介绍两种代理方式。

vue.config.js配置代理

配置方式参见：

module.exports = {
    /* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */ 
    /* baseUrl: process.env.NODE_ENV === 'production' ? './' : '/' */
    publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './',
    /* 输出文件目录：在npm run build时，生成文件的目录名称 */
    outputDir: 'dist',
    /* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
    assetsDir: "assets",
    /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
    productionSourceMap: false,
    /* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
    filenameHashing: false,
    /* 代码保存时进行eslint检测 */
    lintOnSave: true,
    /* webpack-dev-server 相关配置 */
    devServer: {
        /* 自动打开浏览器 */
        open: true,
        /* 设置为0.0.0.0则所有的地址均能访问 */
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
        /* 使用代理 */
        proxy: {
            '/api': {
                /* 目标代理服务器地址: localhost:8080/api/*即会映射到http://192.168.1.172/api/* */
                target: 'http://192.168.1.172',
                /* 允许跨域 */
                changeOrigin: true,
            },
        },
    },
}

对于有config目录的，修改config/index.js文件中dev.proxyTable属性的值为上述代码的proxy即可:

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
	'/api': {
		/* 目标代理服务器地址: localhost:8080/api/*即会映射到http://192.168.1.172/api/* */
		target: 'http://192.168.1.172',
		/* 允许跨域 */
		changeOrigin: true,
		/* 需要rewrite的 */
		pathRewrite: {
			'^/apis': ''
		} 
	},
  },
  cssSourceMap: false
 }

nginx 代理配置

官网获取nginx软件，简单修改配置文件即可：

server {
        listen       8081;
        server_name  localhost;
        location / {
            proxy_pass http://192.168.1.172;
        }
        location /dev {
            proxy_pass http://localhost:8080/dev/;
        }
}
# 映射关系：
# localhost:8081  ⇒ http://192.168.1.172
# localhost:8081/dev  ⇒ http://localhost:8080/dev

两种方式均可以达到较好的效果，当然第一种方法更简单，但nginx更强大；根据自己的工程规模及需求进行选取即可；