Vue3+Vite解决跨域问题
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
Vue3项目
首先找到项目里面的vite.cofig.js找到代码中的server然后替换成下面的即可
server: { //主要是加上这段代码
//host+port实际上就是项目的启动地址是多少
host: '127.0.0.1',
port: 8001,
proxy: {
'/api': {
//这里的target实际上就是真实的后端地址,看看你的路径前缀如果有api的话在端口后面加上api
target: 'http://127.0.0.1:7090/api', //实际请求地址
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
}
}
附上vite.config.js的所有代码
import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import { wrapperEnv } from './build/utils';
import { createProxy } from './build/vite/proxy';
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig(({ mode, command}) => {
const root = process.cwd();
const env = loadEnv(mode, root);
const viteEnv = wrapperEnv(env);
const { VITE_PORT, VITE_PROXY } = viteEnv;
return {
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server: { //主要是加上这段代码
host: '127.0.0.1',
port: 8001,
proxy: {
'/api': {
target: 'http://127.0.0.1:7090/api', //实际请求地址
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
}
}
}
})
此时去使用APIfox访问地址就可以访问到了
GitHub 加速计划 / vu / vue
83
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079
[skip ci] 3 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)