Vue 反向代理&别名

Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：Vue 反向代理&别名

目录

反向代理&别名

跨域问题

反向代理

替换路径

别名

Alias别名配置

缩短路径

总结

---

反向代理&别名

跨域问题

当做前后端分离时，请求后端接口总会遇到跨域问题。

比如在app.vue中请求一个网站的后端接口，

示例如下：

反向代理

在vue.config配置反向代理。

凡是向ajax开头的请求路径就会进行转发请求。

示例如下：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, // 暂时关闭代码格式检测

  // 配置反向代理
  devServer: {
    proxy: {
      '/ajax': {
        target: 'https://i.maoyan.com',
        changeOrigin: true
      }
    }
  }
})

 改完后，进行重启

这时候发现不再提示跨域问题。

替换路径

替换路径写法 pathRewrite，可以对请求路径进行替换。

还是在vue.config.js中编写配置。

示例如下：

// 配置反向代理
  devServer: {
    proxy: {
      // '/ajax': {
      //   target: 'https://i.maoyan.com',
      //   changeOrigin: true
      // },
      '/api': {
        target: 'https://i.maoyan.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 替换为空
        }
      }
    }
  }

 针对这个路径进行替换。更改配置每次都需要重启。

mounted () {
    axios.get('/api/ajax/moreComingList?token=&movieIds=5357,1562632,1523816,1514385,1500945,1319,8778,1493350,1506923,366839&optimus_uuid=4F5AF6F04DBB11F0B3FD535AAF2EAD00CA831F45CDF84DDC83110B274BC3E009&optimus_risk_level=71&optimus_code=10&WuKongReady=h5').then(res => {
      console.log(res.data.data.data)
    })
  },

别名

之前使用其他组件的引用路径，如下：

// ES6 导出规范 -babel(ES6 ==> ES5)
import navbar from './mycomponents/NavBar'
import sidebar from './mycomponents/SideBar'
import Vue from 'vue'

改为使用别名的路径，如下：

@永远指向src

Alias别名配置

在vue.config.js中配置。

示例如下：

const path = require('path')

// 解析路径的函数
const resolve = dir => {
  return path.join(__dirname, dir)
}

module.exports = {
  lintOnSave: false, // 检查语法格式
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src'),
        _mycom: resolve('src/mycomponents') // 将_mycom映射到src/mycomponents
      }
    }
  }
}

缩短路径

使用别名缩短路径

import navbar from '_mycom/NavBar' // webpack 配置的别名

总结

Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：Vue 反向代理&别名