Vue

如果没有vue脚手架需先在终端中运行安装脚手架

npm i @vue/cli -g

2.利用脚手架创建项目

vue create myproject（项目名）

3.创建完项目后，需手动在项目根目录创建vue.config.js

# vue.config.js
module.exports = {
  devServer: {
    host: 'localhost',
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',// 要跨域的域名
        changeOrigin: true, // 是否开启跨域
      },
      '/get': {
        target: 'http://localhost:3000',// 要跨域的域名
        changeOrigin: true, // 是否开启跨域
      }
    }
  }
}

4.在请求跨域接口的时候就可以利用本地服务加上要跨域的接口地址即可

//# 例如我的本地服务端口  localhost:8080

axios.get('http://localhost:8080/api/login')

根目录下新建vue.config.js

// 定义一个变量引入path模块，node环境下搭建
const path = require('path')
// 自定义项目配置
module.exports = {
  publicPath: './',
  // 开发环境下服务配置,设置代理
  devServer: {
    // 3000端口
    port: 3000,
    // 启动项目自动打开浏览器
    open: true,
    // 服务器代理，解决跨域问题
    proxy: {
      '/cloud_job': { // 你的请求 以这个开头代理
        // localhost代理到哪个源上
        target: 'https://api.it120.cc/conner',
        // 是否启动代理
        changeOrigin: true,
        logLevel: 'debug', // 运行时将本地发起的地址和对应指向的地址打印输出
        // 重写路径
        pathRewrite: {
          '^/conner': ''
          /*
          路径别名重写 '/conner就是你的路径别名'
          服务器发送的真正地址应该是
          target+(自动去掉/conner)+路径重写的值+请求path
          /conner/a/b?a=10
          后面有/conner就重写为''
          地址是： https://api.it120.cc/a/b
          */
        }
      }
    }
  },
  // 关闭保存时进行eslint规则验证
  lintOnSave: false,
  // 改变webpack配置，传入一个参数config
  chainWebpack: config => {
    // 设置resolve可以配置查找common.js和AMD模块的基路径
    config.resolve.alias
    // 给文件路径重命名，-dirname重定向命名
    // path.join方法使用平台特定的分隔符把全部的path拼接在一起，并规范化生成路径
    // 给@重命名为src
      .set('@', path.join(__dirname, 'src'))
      .set('@views', path.join(__dirname, 'src/views'))
      .set('@components', path.join(__dirname, 'src/components'))
      .set('@api', path.join(__dirname, 'src/api'))
      .set('@utils', path.join(__dirname, 'src/utils'))
      .set('@assets', path.join(__dirname, 'src/assets'))
  }
}

1.如果没有vue脚手架需先要安装脚手架

cnpm i @vue/cli -g

2.利用脚手架创建项目

vue create myproject（项目名）

3.创建完项目后，需手动在项目根目录创建vue.config.js

# vue.config.js
module.exports = {
  devServer: {
    host: 'localhost',
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',// 要跨域的域名
        changeOrigin: true, // 是否开启跨域
      },
      '/get': {
        target: 'http://localhost:3000',// 要跨域的域名
        changeOrigin: true, // 是否开启跨域
      }
    }
  }
}

4.在请求跨域接口的时候就可以利用本地服务加上要跨域的接口地址即可

# 例如我的本地服务端口  localhost:8080

axios.get('http://localhost:8080/api/login')