Andt Desgin Vue Pro 项目添加前缀访问解决

最新推荐文章于 2024-08-17 20:43:42 发布
最新推荐文章于 2024-08-17 20:43:42 发布
阅读量388 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Vben Admin框架实战(Python Flask后端) 文章标签： vue.js 前端 javascript anti-design-vue nginx 配置vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cui_win/article/details/140356322

文章目录

前言

我们的前端是antd design vue pro开发的项目，之前我们可以通过
https://abc.test.io访问，现在多个项目通过一个域名，现在的需求是使用https://abc.test.io/admin 访问。这里记录下修改的的过程，这块前端框架大同小异，应该都可以借鉴到。

一、项目代码修改

vue.config.js 设置 publicPath

publicPath选项可以用于设置vue.js项目的访问路径前缀，例如我们的项目中需要用前缀/a访问

  // 区分开发和打包分别配置，打包配置的值和nginx配置的保持一致
  publicPath: process.env.NODE_ENV ==
了解本专栏 订阅专栏 解锁全文 超级会员免费看
关于自己Nginx的使用（ant design pro 部署）
【爱打盹的喵】的专栏
03-19 2299
工作需要部署 ant design pro 框架开发的前端程序，并且需要有用到代理。就选择了nginx部署。
And Desgin Vue 组件中文化
sytdsqzr的博客
02-13 441
大家好我是苏麟，今天聊聊组件中文化。其次在要中文化的组件外套一层配置。这样就生效了，就是这么简单。
ant-design-vue 动态主题 css前缀变更
qq_44732555的博客
09-06 1833
ant-design-vue 主题修改
ANT DESIGN PRO V4 编译设置路由前缀
飞鱼丶灬的博客
01-14 935
package.json "build": "cross-env PUBLIC_PATH=/cms/ umi build", "start": "cross-env PORT=8002 PUBLIC_PATH=/cms/ umi dev", config.js const { PUBLIC_PATH } = process.env; export default defineConfig({ hash: true, history: { type: 'hash' }, bas
Ant Design Pro of Vue打包有前缀静态资源访问不到
agdmwtgaga的博客
01-30 959
Ant Design Pro of Vue打包有前缀静态资源访问不到
ant design pro前后端开发环境跨域配置
weixin_44244934的博客
08-17 477
这些请求会被你的开发服务器（通常是一个由前端构建工具提供的本地服务器）接收，然后根据你的代理配置将请求转发到后端服务器（在这个例子中是。：在生产环境中，你也可以通过配置服务器来管理跨域请求，而不必在前端代码中硬编码后端服务的URL，这有助于增加安全性。框架提供了procy文件中的跨域配置，procy中填写的属于是要转发的位置。代理的作用是在本地开发环境中无缝地将请求转发到实际的后端服务，而这一切对前端代码是透明的。：代理可以帮助你在本地开发环境中模拟生产环境的行为，从而确保应用的行为在不同环境中的一致性。
Ant Desgin Vue级联js.rar
11-22
在这个名为"Ant Desgin Vue级联js.rar"的压缩包中，包含的是关于Vue.js与Ant Design Vue结合使用的级联选择器（Cascader）的JS代码和示例。 级联选择器是一种常见的UI元素，它允许用户在多个层次的选项中进行选择，...
vue-antd-pro:vue + ant-design-vue创建后台管理系统模板
03-11
欢迎来到vue-antd-pro :waving_hand: 基于vue-cli3和构建的后台管理系统模板，使用json-server做数据模型。 安装依赖 安装前端依赖 yarn 安装数据mock依赖 cd server yarn 运行 运行数据mock服务 // enter server ...
Muse-Ant-Desgin-Vue 改造成vue3的代码
01-09
Muse-Ant-Design-Vue则是一个基于Vue.js和Ant Design的UI框架，它将Ant Design的美观和Vue.js的灵活性结合在一起，为开发者提供了一套优雅的解决方案。 本次改造的焦点是将Muse-Ant-Design-Vue从Vue 2迁移到Vue 3，...
antd修改前缀
学无的博客
10-28 4605
antd修改前缀
Ant Design Pro 封装网络请求
yuzheh521的博客
07-31 2146
可以直接在antdPro项目的app.文件中对request进行运行时配置，并且该配置会直接透传到umi-request的全局配置。后续直接从umi中引入request或者useRequest直接使用，可以说是非常方便。
基于antd pro框架，配置接口apiUrl前缀
热门推荐
shunzizhan
03-18 1万+
基于antd-pro框架，配置package.json中的打包命令，实现不同环境使用不同的接口apiUrl前缀，避免人肉修改，保证各环境对应各自的api地址。 背景 这阵子，在玩antd-pro，感觉整体框架基本是一套很完善的管理系统，因此也将该套框架运用到实际项目中，UI、组件啥的都没有问题，就是在打包部署的时候，本地开发、测试、线上接口api前缀不同，打包发布到测试环境和线上环境，需要人为...
antd vue pro (vue 2.x) 多页签详细操作
apgk的博客
05-08 1365
antd vue pro 多页签详细配置教程。 ant design vue pro 多页签详细配置
Ant Design Pro of Vue 用nginx代理部署Java项目连通
一切都会好起来的，即使不在今天
05-17 738
npm run dev 打包 或 yarn build 打包 或 如下图均可以打包 打包后可以测试 npm install http-server -g 全局 http-server 或者 npm install -g serve(全局安装) serve -s dist 打包后把打包生成的dist文件复制到nginx html目录 nginx相关命令 nginx config配置 location / { root html/dist; index
nginx部署（Springboot-Ant Design Pro of Vue）
agdmwtgaga的博客
01-30 317
nginx部署（Springboot-Ant Design Pro of Vue）
Vue项目在本地跑起来 所有路径前面想加入前缀进行访问配置
往事随风
01-09 1586
Vue项目本地访问时加前缀解决方案
vue 定义axios默认路径前缀或动态修改前缀
周家大小姐
11-02 3694
如:每个请求url前都要加一个前缀,但会根据开发环境不同而变化,那么我们可以写一个方法去引用,方便后面维护 .env.development开发文件中写入要用的服务编码 # 微服务编码 VUE_APP_SERVICE_PREFIX = '/0201040201' src/settings.js新建的settings文件中引入 module.exports = { /** * 主站标题 * @type {string} */ title: '开发项目名称', /..
关于ANTD PRO VUE PRO根据用户权限生成动态路由的方法
Unitent_
11-29 4554
根据用户的角色权限生成动态路由前言要解决的问题第一步：选择解决方案最终实现 前言 此次Demo的项目是前后端分离，前端使用的是：ant-design-vue-pro，后端使用的是：若依，选择这两个框架的原因是这个两个前后端框架对一些基本功能都做了很好的封装，而且学习成本很低，拿来即用。 要解决的问题 若依这个框架它本身即是基于vue的前后端分离框架，对于前端权限控制这块主要交给了组件Emlemt ui ，但是我更喜欢使用ant design 所以我选择了antd vue pro，所以这次要解决的问题就是
vue 路由统一前缀和接口统一前缀
xiaodebufuyan的博客
08-06 1173
统一前缀
vue3 vite ant desgin vue项目启动报错白屏computed is not a function
最新发布
03-25
<think>好的，我现在需要帮助用户解决他们在Vue3 Vite Ant Design Vue项目中遇到的白屏和'computed is not a function'错误。首先，我得仔细分析这两个问题的可能原因，然后找到对应的解决方案。 首先，关于白屏的问题。白屏通常意味着应用初始化失败，可能的原因有很多。根据用户提供的引用内容，特别是引用[1]提到需要将引入的CSS文件改为LESS文件以便定制主题。如果用户没有正确配置LESS，可能会导致样式加载失败，进而影响组件渲染，出现白屏。另外，Vite的配置是否正确也可能导致模块加载失败，比如插件缺失或配置错误。此外，引用[3]提到在Vue3中使用setup函数，如果组件初始化时出现错误，比如生命周期钩子或响应式API使用不当，也可能导致整个应用崩溃，显示白屏。 然后是'computed is not a function'错误。computed是Vue3的响应式API之一，这个错误通常发生在没有正确导入computed函数的情况下。在Vue3中，需要从'vue'包中导入computed，或者在setup语法糖中正确使用。如果用户在使用Ant Design Vue的组件时，可能某些组件依赖computed，但项目中未正确导入，导致这个错误。另外，如果项目中存在版本不兼容的问题，比如Vue和Ant Design Vue版本不匹配，也可能导致API无法正确识别。 接下来，我需要结合用户提供的引用内容来寻找解决方案。引用[3]提到在Vue3中setup函数的使用，这可能涉及到是否正确导入和使用响应式API。引用[1]和[4]涉及样式配置，特别是使用LESS和主题切换，这可能影响项目的构建过程，如果配置错误，可能导致应用无法启动，出现白屏。引用[2]和[3]提到路由和Vue3的语法调整，如果路由配置不正确，比如入口文件或Layout组件的问题，也可能导致白屏。 可能的解决方案步骤包括： 1. 检查Vue和Ant Design Vue的版本兼容性，确保使用支持的版本组合。 2. 确保正确导入computed函数，在需要的地方从'vue'中引入。 3. 检查Vite配置，确保已安装并正确配置了必要的插件，如@vitejs/plugin-vue和unplugin-vue-components。 4. 检查是否正确引入Ant Design Vue的样式文件，特别是使用LESS并安装相关依赖（less和less-loader）。 5. 检查路由配置是否正确，特别是Vue3中路由的语法变化，如使用createRouter和createWebHistory。 6. 检查入口文件（main.js）是否正确初始化应用实例，并使用必要的插件。 7. 通过控制台错误和构建日志来定位具体问题，比如模块加载失败或语法错误。 需要确保用户按照正确的步骤配置项目，并处理可能存在的依赖问题或语法错误。此外，提供逐步排查的方法，帮助用户自行诊断问题所在。</think>### Vue3 Vite Ant Design Vue项目白屏及`computed is not a function`错误解决方案 #### 一、白屏问题分析及解决 1. **依赖版本兼容性问题** - **现象**：未正确安装或版本不匹配可能导致核心依赖缺失。 - **解决方案**： 确保使用以下兼容版本组合： ```bash "vue": "^3.3.x", "ant-design-vue": "^4.x", "@vitejs/plugin-vue": "^4.5.x", "vite": "^4.4.x" ``` 使用`npm install`或`yarn add`更新依赖[^3]。 2. **Ant Design Vue样式未正确引入** - **现象**：组件未渲染或样式丢失导致白屏。 - **解决方案**： 在`main.js`中引入LESS文件并安装预处理工具： ```javascript import 'ant-design-vue/dist/antd.less'; // 替换原CSS引入[^1] ``` ```bash npm install less less-loader --save-dev ``` 3. **Vite插件配置缺失** - **现象**：控制台提示Vue组件解析错误。 - **解决方案**： 在`vite.config.js`中添加必要插件： ```javascript import vue from '@vitejs/plugin-vue'; import Components from 'unplugin-vue-components/vite'; import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'; export default { plugins: [ vue(), Components({ resolvers: [AntDesignVueResolver()] }) // 自动导入组件[^3] ] }; ``` 4. **路由配置错误** - **现象**：路由未正确挂载导致入口组件未渲染。 - **解决方案**： 检查`router/index.js`是否使用Vue3语法： ```javascript import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', component: () => import('@/views/Home.vue') }, { path: '/dashboard', component: () => import('@/views/Dashboard.vue'), meta: { layout: 'Default' } } // Layout配置在meta中[^2] ] }); ``` --- #### 二、`computed is not a function`错误分析 1. **未正确导入`computed`函数** - **现象**：在选项式API或组合式API中直接调用`computed()`。 - **解决方案**： 从`vue`显式导入： ```javascript import { computed } from 'vue'; // 组合式API用法 setup() { const value = computed(() => someValue); } ``` 2. **Ant Design Vue组件兼容性问题** - **现象**：旧版本组件库在Vue3中未适配响应式API。 - **解决方案**： 升级到`ant-design-vue@4.x`并检查组件文档，避免使用已废弃的API[^4]。 --- #### 三、完整排查流程 1. **检查控制台报错** - 定位具体报错文件及代码行（如未捕获的Promise错误或语法错误）。 2. **验证入口文件初始化** ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); app.use(router).use(AntDesignVue).mount('#app'); // 确认插件注册顺序 ``` 3. **构建日志分析** 运行`npm run dev`观察是否有以下警告： - `@ant-design/icons`缺失 → 安装`@ant-design/icons-vue` - `defineComponent`未定义 → 检查Vue版本 --- #### 四、优化建议 1. **启用Vite调试模式** ```bash vite --debug ``` 2. **使用Vue Devtools** 检查组件树和响应式数据状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值