时间戳

首页 > 解决方案 > vue.config.js 中的 devServer 代理错误地映射 url

vue.js - vue.config.js 中的 devServer 代理错误地映射 url

问题描述

我正在开发一个 vue/cli 3 项目。我vue.config.js的是

module.exports = {
  publicPath: process.env.NODE_ENV == 'production' ? '/admin/' : '/',
  devServer: {
    proxy: {
      '/serveradmin': {
        target: 'http://localhost:8080/serveradmin',
      },
      "/assets/*": {
        target: "http://localhost:8080/assets",
        logLevel: 'debug',
        changeOrigin: true,
        secure: false,
      },
    },
  },
};

使用curl -v -X "HEAD" http://localhost:8081/assets/css/main.css，我得到一个 404。控制台显示：

  App running at:
  - Local:   http://localhost:8081/ 
  - Network: http://192.168.1.155:8081/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

[HPM] HEAD /assets/css/main.css -> http://localhost:8080/assets

我试过摆弄 pathRewrite，它不会改变结果。将代理密钥更改为"/assets"没有任何区别。我究竟做错了什么？

标签： vue.jswebpack-dev-servervuejs3

解决方案

该target属性应该是原始路径附加到的基本 URL。使用您当前的配置，请求将针对http://localhost:8080/assets/assets/css/main.css（注意两个assets）。

/assets从目标 URL中删除后缀：

// target: "http://localhost:8080/assets",
target: "http://localhost:8080",

推荐阅读