vue-cli3项目出现跨域的解决方法

快来打我* 2023-07-18 11:30 2阅读 0赞

使用vue-cli3搭建脚手架时，没有以前的webpack配置文件，一些配置列如跨域，alias无法配置，这时候在项目目录下新建一个vue.config.js即可。

具体配置如下

解决跨域配置

devServer: {
            proxy: {
                '/api': {
                    // target: "http://10.19.193.135:8870/ssyth",
                    target: 'http://www.okzyw.com',
                    changeOrigin: true, // 是否跨域
                    pathRewrite: {
                        '^/api': ''
                    }
                },
                '/foo': {
                    // target: "http://10.19.193.135:8870/ssyth",
                    target: 'https://api.apiopen.top',
                    changeOrigin: true, // 是否跨域
                    pathRewrite: {
                        '^/foo': ''
                    }
                },
                '/db': {
                    // target: "http://10.19.193.135:8870/ssyth",
                    target: 'https://movie.douban.com/',
                    changeOrigin: true, // 是否跨域
                    pathRewrite: {
                        '^/db': ''
                    }
                }
            },
        },

解决alias配置

chainWebpack: config => {
            config.resolve.alias
                .set('@', resolve('src'))
                .set('cn', resolve('src/components/common'))
                .set('mioJs', resolve('src/common/js'))
                .set('json', resolve('src/static/mockJson'))
        }

如果在webstorm中alias配置后无法快速定位文件，可新建一个alias.config.js配置文件

内容如下

// 此文件用于 webstorm 快速定位文件
    const path = require('path')
    
    function resolve (dir) {
        return path.join(__dirname, dir)
    }
    
    module.exports = {
        resolve: {
            alias: {
                '@': resolve('src'),
                cn: resolve('src/components/common'),
                mioJs: resolve('src/common/js'),
                json: resolve('src/static/mockJson')
            }
        }
    }

完整的vue.config.js

const path = require('path')// 配置uni-router的路由页面const TransformPages = require('uni-read-pages')// const uni-simple-router = require('uni-read-pages')const tfPages = new TransformPages({
           includes: ['path', 'name', 'meta']})function resolve (dir) {
           return path.join(__dirname, dir)}module.exports = {
           transpileDependencies: ['uni-simple-router'],    configureWebpack: {
               plugins: [            new tfPages.webpack.DefinePlugin({ // 配置uni-router的路由页面                ROUTES: JSON.stringify(tfPages.routes)            })        ]    },    devServer: {
               proxy: {
                   '/api': {
                       // target: "http://10.19.193.135:8870/ssyth",                target: 'http://www.okzyw.com',                changeOrigin: true, // 是否跨域                pathRewrite: {
                           '^/api': ''                }            },            '/foo': {
                       // target: "http://10.19.193.135:8870/ssyth",                target: 'https://api.apiopen.top',                changeOrigin: true, // 是否跨域                pathRewrite: {
                           '^/foo': ''                }            },            '/db': {
                       // target: "http://10.19.193.135:8870/ssyth",                target: 'https://movie.douban.com/',                changeOrigin: true, // 是否跨域                pathRewrite: {
                           '^/db': ''                }            }        },    },    chainWebpack: config => {
               config.resolve.alias            .set('@', resolve('src'))            .set('cn', resolve('src/components/common'))            .set('mioJs', resolve('src/common/js'))            .set('json', resolve('src/static/mockJson'))    }}

![format_png][]

[format_png]: /images/20230528/f166f19af26a4f25847a9c2cb61b0a9b.png