在Vue项目中使用Vite进行打包,并配置相对路径部署,可以确保你的应用在不同的部署路径下都能正常访问。以下是详细的步骤和配置说明: 1. 理解Vite打包配置的基本概念和相对路径部署的需求 Vite 是一个现代的前端构建工具,它提供了快速的冷启动、即时热模块更新(HMR)以及丰富的插件生态。在部署Vue应用时,你可能希望应用...
解决方案:因为项目使用vue-router4,api上面有变动,需要在createWebHistory方法写入对应参数,如下官方文档截图: 参考文档:https://router.vuejs.org/zh/api/#createwebhistory 修改完成后,跳转正确: 3.访问页面子路由后刷新页面404; 解决方案:修改nginx配置文件 ...
在vite.config.js中配置base属性,打开配置文件: import{ defineConfig, loadEnv }from'vite'importvuefrom'@vitejs/plugin-vue'// https://vitejs.dev/config/exportdefaultdefineConfig(({ mode }) =>{// 获取 .env 环境配置文件constenv =loadEnv(mode, process.cwd());return{base: env.VITE_BASE_PATH...
2.部署在非根服务目录下,如:部署在http://192.168.31.223:8090/arcodesignpro/下,路由跳转不正确问题; 如图在没有登陆情况下跳转应该是http://192.168.31.223:8090/arcodesignpro/login,,结果跳转到http://192.168.31.223:8090/login 解决方案:因为项目使用vue-router4,api上面有变动,需要在createWebHistory方法写入...
一、 使用Vite创建Vue3项目 1.全局安装vite，使用命令npm install vite -g 2.创建vue3项目，使用命令 npm create vite@latest ,确认项目名 称，选择Vue及TypeScript 3. 使用用vscode打开项目，运行命令 npm install npm run dev 4.整个项目目录结构如下：5.访问页面 二、将打包项目发布到Nginx 1.将打包后...
步骤一:初始化项目 使用Vite初始化项目: npm init vite@latest my-vue-app --template vue cd my-vue-app npm install 1. 2. 3. 步骤二:安装依赖 安装项目所需的所有依赖: npm install pinia vue-router element-plus axios prettier eslint eslint-plugin-vue ...
最近利用Vite构建Vue3写了一个简单的ToDoList,想要部署到Gitee,并开启 Gitee Pages服务时出现页面空白的问题,参考了很多博客,尝试了很多办法都没有解决,正愁眉不展时我点开了Vite的官方文档,好家伙,直接茅塞顿开,原本这么小的一个问题被我想的太复杂了,还浪费了那么多时间,哎,此刻记录下我的解决办法,希望能帮到跟...
随着vue3成为默认版本,国内的开发者接触vite越来越多,其中原因其实就一个字:快。详细请看 为什么选 Vite | Vite 官方中文文档 在这种组合项目在部署时候经常会遇到这样或那样的问题,接下对于部署的时候遇到的一些问题罗列以及一些解决方案: nginx部署如图: ...
新项目是VUE3+VITE4做前端,后端是FastAPI,开发环境中前端访问后端正常,没有任何问题,打包部署到服务器上前端始终无法访问后端服务器,在网上查了很多资料,解决方法其实是有问题。现记录如下,备查。 一、前端配置的问题 前端vite.config.ts里的代理配置只适用开发环境,和正式环境无关!!
Vue3 是一个当前非常流行的Web前端框架,可以帮助我们构建现代化的Web应用程序。在Vue3中,Vite是一个新的构建工具,它可以更快地构建我们的应用程序。 GitHub Pages是一个免费的静态网站托管服务,可以帮助我们将我们的Vue3应用程序部署到互联网上。它直接从 GitHub 上的仓库获取 HTML、CSS 和 JavaScript 文件,通过构...