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

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

具体配置如下

解决跨域配置

代码语言：javascript复制

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': ''
                }
            }
        },
    },

代码语言：javascript复制

解决alias配置 

代码语言：javascript复制

 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'))

    }

代码语言：javascript复制

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

内容如下

代码语言：javascript复制

// 此文件用于 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

代码语言：javascript复制

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'))
    }
}

vue.js javascript

0 人点赞