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

 

使用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'))    }}​