现在的 vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
// 关闭eslint校验
// lintOnSave: false
})
一、在src目录下创建 settings.js用于存放所有规则配置
module.exports = {
title: 'Example示例',
transpileDependencies: true
// 关闭eslint校验
// lintOnSave: false
}
在vue.config.js中添加以下语句引入settings.js文件
const defaultSettings = require('./src/settings.js')
二、在vue.config.js文件中添加path模块
path 模块，提供了一些工具函数，用于处理文件与目录的路径。path.join()方法用于连接路径，该方法会正确识别当前系统的路径分隔符，如Unix系统是”/“，Windows系统是”\“。__dirname 是node的一个全局变量，即获得当前文件所在目录的完整目录名。
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
三、在vue.config.js中添加端口和网址标题设置
const name = defaultSettings.title // 网址标题 const port = 8099 // 端口配置
四、在vue.config.js中配置module.exports及代理，并在前端解决跨域问题
const path = require('path')
const defaultSettings = require('./src/settings.js')
function resolve(dir) {
return path.join(__dirname, dir)
}
const name = defaultSettings.title // 网址标题
const port = 8099 // 端口配置
module.exports = {
// 配置基地址BASE_URL等于publicpath的值
// NODE_ENV：Node.js 暴露给执行脚本的系统环境变量。通常用于确定在开发环境还是生产环境
// 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
// publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
outputDir: 'dist', // 输出文件目录
assetsDir: 'static', // // 放置静态资源
lintOnSave: process.env.NODE_ENV === 'development',// true/false 设置为开发环境下每次保存代码时都启用 eslint验证
productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为false以加速生产环境构建
devServer: { // 配置开发服务器
port: port,
// overlay: { // 错误、警告在页面弹出
// warnings: false,
// errors: true
// },
/* 跨域代理 */
proxy: {
// 第一种写法
'/api': {
/* 目标代理服务器地址 */
target: 'http://localhost:8090/',
/* 允许跨域 */
changeOrigin: true,
pathRewrite: { // 标识替换
'^/api': '/static/mock' // 请求数据路径别名,这里是注意将static/mock放入public文件夹
}
},
// 第二种写法
[process.env.VUE_APP_BASE_API]: { // 使用环境变量中的值
target: 'http://127.0.0.1:9000/',
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '',
'^/api': ''
}
}
}
}
}
至此前后端解决跨域的方法都有了，可只写一个，也可全写
如图，pathRewrite设置了 '^/api': '' ，作用如下:
使用代理，首先需要有一个标识，告诉程序这个连接要使用代理，不然的话，可能你的html、css、js、矢量图等静态资源都跑去代理。所以我们要通过一个唯一标识，让接口使用代理，静态资源文件使用本地。
proxy中的 '/api':{······}，就是告诉node，我的接口是要以 /api 开头的才使用代理。所有的接口都要写成 /api/xx/xx ，以 /api 开头，最后代理的接口路径路径就是 http://localhost:8090/api/xx/xxi
但是例子中真实的后台数据接口里没有 /api，直接就是 http://localhost:8080/xx/xx ，所以就需要配置 pathRewrite，用'^/api': '' 将 /api 去掉，这样既有正确的标识，又能在真实请求接口的时候去掉 /api 。
五、创建上一步中的开发环境配置文件.env.development
可对应配置相应的生产环境配置文件
ENV = 'development'
VUE_APP_BASE_API = 'http://localhost:8090/api/'
六、修改request.js中的baseURL
import axios from "axios";
const service = axios.create({
// baseURL: 'http://localhost:8090/api',
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
timeout: 3000
})
export default service;
七、启动项目测试
成功运行，并正常请求返回后端数据
