vue开发微信商城项目总结之四--本地代理处理跨域问题
关于项目的基本描述,参见
vue开发微信商城项目总结之三–根据不同的开发环境做配置
之前处理跨域问题是通过jsonp,但是只有开发环境是跨域的,代码打包后上传到服务器便不再跨域,所以ajax在本地做了判断,判断是否是跨域,跨域则走jsonp否则其他正常调用
可以通过本地配置nginx做代理来处理跨域,但是作为一个前端来说,学习成本略高,
后来发现vue-cli中也有代理,解决开发环境跨域的问题,
config>index.js 在dev中找到中找到proxyTable,并对其进行配置,我的index.js如下
var path = require('path') var new_date = new Date(); /**日期时间格式化 20170413170432**/ var date_month = new_date.getMonth() <= 8 ? '0' + (new_date.getMonth() + 1) : (new_date.getMonth() + 1); var date_day = new_date.getDate() <= 9 ? '0' + new_date.getDate() : new_date.getDate(); var date_hour = new_date.getHours() <= 9 ? '0' + new_date.getHours() : new_date.getHours(); var date_min = new_date.getMinutes() <= 9 ? '0' + new_date.getMinutes() : new_date.getMinutes(); var date_sec = new_date.getSeconds() <= 9 ? '0' + new_date.getSeconds() : new_date.getSeconds(); var new_dateTime = new_date.getFullYear() + "年" + date_month + "月" + date_day + "日" + date_hour + "时" + date_min + "分" + date_sec + '秒'; module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/' + new_dateTime + 'app' + '/index.html'), // 编译输入的 index.html 文件 assetsRoot: path.resolve(__dirname, '../dist/' + new_dateTime + 'app'), // 编译输出的静态资源路径 assetsSubDirectory: 'static', // 编译输出的二级目录 assetsPublicPath: './', // 编译发布的根目录,可配置为资源服务器域名或 CDN 域名 productionSourceMap: false, // 是否开启 cssSourceMap productionGzip: false, // 是否开启 gzip productionGzipExtensions: ['js', 'css'], // 需要使用 gzip 压缩的文件扩展名 bundleAnalyzerReport: process.env.npm_config_report }, buildppe: { env: require('./ppe.env'), index: path.resolve(__dirname, '../dist/' + new_dateTime + 'ppe' + '/index.html'), // 编译输入的 index.html 文件 assetsRoot: path.resolve(__dirname, '../dist/' + new_dateTime + 'ppe'), // 编译输出的静态资源路径 assetsSubDirectory: 'static', // 编译输出的二级目录 assetsPublicPath: './',// 编译发布的根目录,可配置为资源服务器域名或 CDN 域名 productionSourceMap: false, // 是否开启 cssSourceMap productionGzip: false, // 是否开启 gzip productionGzipExtensions: ['js', 'css'], // 需要使用 gzip 压缩的文件扩展名 bundleAnalyzerReport: process.env.npm_config_report }, buildddd: { env: require('./ddd.env'), index: path.resolve(__dirname, '../dist/' + new_dateTime + 'dev' + '/index.html'), // 编译输入的 index.html 文件 assetsRoot: path.resolve(__dirname, '../dist/' + new_dateTime + 'dev'), // 编译输出的静态资源路径 assetsSubDirectory: 'static', // 编译输出的二级目录 assetsPublicPath: './',// 编译发布的根目录,可配置为资源服务器域名或 CDN 域名 productionSourceMap: false, // 是否开启 cssSourceMap productionGzip: false, // 是否开启 gzip productionGzipExtensions: ['js', 'css'], // 需要使用 gzip 压缩的文件扩展名 bundleAnalyzerReport: process.env.npm_config_report }, dev: { env: require('./dev.env'), port: 1111, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/baseUrl': { /* 当发生跨域请求是调用此接口 本地代理*/ target: 'https://api.douban.com/v2/event/list?loc=108288&start=1&count=3', changeOrigin: true, pathRewrite: { '^/baseUrl': '' } }, }, cssSourceMap: false } }
在使用的时候
get () { // 开发环境跨域时调用本地代理 具体查看 config-->index.js this.$http.post(process.env.baseUrl) .then(res => { console.log(res) this.data = res }) }
config>config>dev.env.js
var merge = require('webpack-merge') var prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', baseUrl: '"/baseUrl"',//处理跨域 /* 福币商品skuID */ rechargeList: `[{ skuid: "020d73154fea407aba111e8a0b010cb1", name: "开发", thumbPath: '' }, { skuid: "b7ef02ebab9f4edf9cb44cb184f7dec3", name: "开发", thumbPath: '' }, { skuid: "52856479a6e74c4e9ea943ce6b4d4827", name: "开发", thumbPath: '' }, { skuid: "a4b821d1bcf34d4b9af286c1a9cedc92", name: "开发", thumbPath: '' }]`, })
process.env 是根据不同的环境调用不同的接口,具体看这里我的项目中一共四个环境
开发环境 dev
测试环境 ddd
预生产环境 ppe
生产环境(正式环境) production
相关推荐
softwear 2020-08-21
yuzhu 2020-11-16
85477104 2020-11-17
KANSYOUKYOU 2020-11-16
sjcheck 2020-11-03
怪我瞎 2020-10-28
源码zanqunet 2020-10-28
gloria0 2020-10-26
王军强 2020-10-21
学习web前端 2020-09-28
QiaoranC 2020-09-25
anchongnanzi 2020-09-21
安卓猴 2020-09-12
Macuroon 2020-09-11
kiven 2020-09-11
LittleCoder 2020-09-11
Cheetahcubs 2020-09-13
小焊猪web前端 2020-09-10
颤抖吧腿子 2020-09-04