yarn run build 对项目进行打包 9.打包完的文件在dist目录下,注意: 1.有跨域保护,所以需要放到服务器下运行; 2.路径默认为服务器根目录,因此要添加相对路径。 解决方法: 在vite.config.js文件内,添加:base:'./' 修改完成再次使用:yarn run build,对项目进行打包即可。 发布的文件在dist文件夹内,添加到服务器...
1. 理解Vite打包配置的基本概念和相对路径部署的需求 Vite 是一个现代的前端构建工具,它提供了快速的冷启动、即时热模块更新(HMR)以及丰富的插件生态。在部署Vue应用时,你可能希望应用能够在不同的基础路径(base path)下运行,例如 /app/、/myapp/ 等,而不是默认的根路径 /。这就需要你配置Vite的打包输出,使其...
vite vue3 打包nginx vue项目打包部署到linux 一. vue前端项目打包 使用vscode开发项目 ,在src的同级目录下创建一个vue.config.js文件(已有的话则修改相应内容),向其中写入配置信息并保存: module.exports = { publicPath: './', outputDir: 'dist', assetsDir: 'static' } 1. 2. 3. 4. 5. module.exp...
history: createWebHistory(import.meta.env.VITE_BASE_URL), routes }); 五.打包 如上配置好后根据不同环境重新打包部署进行测试即可 "scripts": { "dev": "vite", "preview": "vite preview", "build": "run-p type-check \"build-only {@}\" --", "build-test": "vite build --mode dev",...
新项目是VUE3+VITE4做前端,后端是FastAPI,开发环境中前端访问后端正常,没有任何问题,打包部署到服务器上前端始终无法访问后端服务器,在网上查了很多资料,解决方法其实是有问题。现记录如下,备查。 一、前端配置的问题 前端vite.config.ts里的代理配置只适用开发环境,和正式环境无关!!
一、 使用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.config.js 常见配置项 import{fileURLToPath,URL}from"node:url";import{defineConfig}from"vite";importvuefrom"@vitejs/plugin-vue";importqiankunfrom"vite-plugin-qiankun";exportdefaultdefineConfig({// 开发或生产环境服务的公共基础路径base:"/subapp/sub-vue3-vite",// 将目录设定为静态资源...
我们做一个纯前端自动提示用户刷新页面的功能,这个功能主要是防止用户的js代码还是旧版的导致某些功能没能及时更新。 整体架构流程 1、我们先在 public/version.json创建这个json文件,用来存储版本号 { "version": "1.0" } 2、我们可以在 vite.config.js 文件里面写这个自动写入文件更新版本号方法 ...
这是因为开发的时候我们使用的是vite的代理配置，这个配置在我们本地启动开发服务器的时候用的到，但是...