YDOOK: Vue-cli4.5 vue3.0: 跨域问题1 “vue“ field in package.json ignored due to presence of vue.config.js

YDOOK: Vue-cli4.5 vue3.0: 跨域问题1 “vue” field in package.json ignored due to presence of vue.config.js

1. 出现提示:

 WARN  "vue" field in package.json ignored due to presence of vue.config.js.
 WARN  You should migrate it into vue.config.js and remove it from package.json.
 # ©YDOOK JYLin

2. Control 显示:

YDOOK


3. 此时的 ./package.json 文件中的 vue 部分配置为:

YDOOK

"vue": {
        "devServer": {
            "port": 80,
            "open": true
        }
    }

4. 此时新建的 ./vue.config.js 文件内容为:

module.exports = {
    devServer: {
        // 代码插入位置
        proxy: {
            '/api': {
                target: 'http://localhost:8002', // 设置跨域代理的目标 URL与端口,使用 [api] 代替
                // secure: false, // 是否设置允许https接口API 
                changeOrigin: true, // 是否设置接口跨域
                pathRewrite: {
                    '^/api': '' // 路径重写,这里理解成用'/api'代替target里面的地址。
                }
            }
        }
    }

    // eslint-disable-next-line eol-last
}

5. 原因及解决办法:如英文所示:

YDOOK

6. 解决方案:在新建 ./vue.config.js 文件直接插入 ./package.json 文件下 vue子配置的内容,再将./package.json 文件下 vue子配置整个删除即可


7. 配置后的 ./package.json 文件:

YDOOK


8. 配置后的 ./vue.config.js 文件:

/* eslint-disable indent */
module.exports = {
	// ©YDOOK JYLin
    devServer: {
        port: 80,
        open: true,
        proxy: {
            '/api': {
                // 以下接口胡编,项目中需要使用自己的
                target: 'http://localhost:8002', // 这里配置的是 请求接口的域名
                // secure: false, // 如果是https接口,需要配置这个参数
                changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
                pathRewrite: {
                    '^/api': '' // 路径重写,这里理解成用'/api'代替target里面的地址。
                }
            }
        }
    }

    // eslint-disable-next-line eol-last // 这句代码用于设置 VSC的 eslint插件的末尾空行的自动修正
}

9. 完成以上步骤后,重新运行 vue-cli4.5 项目即可无任何警告:

YDOOK



YDOOK CSDN认证博客专家 算法 人工智能
欢迎访问个人网站: www.ydook.com
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页