iview admin 本地开发环境配置代理服务解决跨域问题

最近公司有个前端项目用到了iview admin，本地开发时，因为接口在另一台机器上，所以在接口请求时，涉及到了跨域访问的问题，因为之前使用VUE2.0+Element，通过配置代理解决了跨域问题，而iview admin也是基于VUE2开发，所以自然的想到了使用同样的方法来解决。但是在使用过程中，与之前有些差异。

这里记录下修改的配置，以备后需。

修改文件：/build/webpack.dev.config.js

修改位置：在module.exports中添加代理配置devServer

module.exports = merge(webpackBaseConfig, {
    devtool: '#source-map',
    output: {
        publicPath: '/dist/',
        filename: '[name].js',
        chunkFilename: '[name].chunk.js'
    },
    plugins: [
        new ExtractTextPlugin({
            filename: '[name].css',
            allChunks: true
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: ['vender-exten', 'vender-base'],
            minChunks: Infinity
        }),
        new HtmlWebpackPlugin({
            title: 'iView admin v' + package.version,
            filename: '../index.html',
            inject: false
        }),
        new CopyWebpackPlugin([
            {
                from: 'src/views/main-components/theme-switch/theme'
            },
            {
                from: 'src/views/my-components/text-editor/tinymce'
            }
        ], {
            ignore: [
                'text-editor.vue'
            ]
        })
    ],
    devServer:{
        historyApiFallback:true,
        hot:true,        
        inline:true,        
        stats:{color:true},        
        proxy:{            
            '/api':{           //接口请求格式：/api/user/login
                target:'http://www.api.com',//接口服务器域名
                changeOrigin:true,            
                pathReWrite:{'^/api':'/api'}                
            }        
        }    
    }
});

配置之后，重新执行：npm run dev 即可。

 

如果遇到404错误，可能是路径配置的问题，期初使用的如下的配置，回报404错误，供各位道友参考

报404错误的代码：

    devServer:{
        historyApiFallback:true,
        hot:true,        
        inline:true,        
        stats:{color:true},        
        proxy:{            
            '/api':{           //接口请求格式：/api/user/login
                target:'http://www.api.com/api/',//接口服务器域名地址
                changeOrigin:true,            
                pathReWrite:{'^/api':'/'}                
            }        
        }    
    }

 

target 单使用域名没问题,使用域名+/api后便会出现404错误，具体原因还没有查找，欢迎评论指正。