发布后前后端联调（将/ 替换为/api）_发帖页面前后端联调-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_30940855/article/details/131539985

本文介绍了如何修改vue.config.js设置接口代理，并调整Nginx配置进行转发，包括处理pathRewrite和ws支持。同时提到了在Docker环境下发布Vue应用时可能遇到的问题及解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1,修改vue.config.js 并且测试接口（注意如果项目中pathRewrite:为/ 最好将其换为/api 并将所有接口前都加入/api，为后续nginx代理创造条件)

let proxyObj = {};
const CompressionPlugin = require("compression-webpack-plugin");
proxyObj['/ws'] = {
    ws: true,
    target: "ws://192.168.144.129:8181",

};
proxyObj['/api'] = {
    ws: false,
    target: 'http://192.168.144.129:8181',
    changeOrigin: true,
    pathRewrite: {
        '^/api': ''
    }
}

module.exports = {
    devServer: {
        // host: 'localhost',
        open:false,
        port: 8090,
        proxy: proxyObj
    },
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            return {
                plugins: [
                    new CompressionPlugin({
                        test: /\.js$|\.html$|\.css/,
                        threshold: 1024,
                        deleteOriginalAssets: false
                    })
                ]
            }
        }
    }
}

2,修改nginx.conf文件，注意/api/ 后面加/ proxy_pass 地址后面加/

server {
	# 监听的端口号
    listen       8090;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;
       # root地址来源于dockerfile中 copy dist
    location / {
        root   /usr/share/nginx/html/dist;
        index  index.html;
    }
   # nginx转发   后台接口地址
   # 第一步,把所有的 /abc/interface  转换成:/interface
   location /api/ {	
       proxy_pass   http://192.168.144.129:8181/;
   }
    # nginx转发   后台接口地址
    location /ws/ {	
       proxy_pass   http://192.168.144.129:8181/;
   }
	
}

3重新发布可以参照另外一篇文章

Docker发布VUE vhr微人事前端（Nginx 403 forbidden）_不要和代码过不去的博客-优快云博客

最后：过程中有各种问题。相信自己。细致处理。