踩坑日志 | vue-cli3 跨域配置 404

场景描述

• vue-cli3脚手架创建,启动项目无异常
• 引入插件及配置,无异常
• 增加vue.config.js,尝试别名配置无异常
• vue.config.js跨域配置,结果访问404,无法访问资源

其中vue.config.js代码如下

const path = require('path');

function resolve(dir) {
    return path.join(__dirname, dir);
}
module.exports = {
    lintOnSave: true,
    chainWebpack: (config) => {
        config.resolve.alias
            .set('@', resolve('src'))
    },
    devServer: {
        proxy: {
            '/api': {
                target: 'http://xxx/', // 对应自己的接口,此处需要保密,抱歉
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/'  //通过pathRewrite重写地址，将前缀/api转为/
                }
            }
        }
    }
};

vue解决跨域的方案,大多是设置了代理,从结果上看为localhost:8080/api/xxx,但404了,其实无论成功与否都是这种显示成果

解决方案

我是使用vscode这个编辑器的,前端重新启动 npm run serve得以解决