步骤一:初始化项目 使用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 1. 步骤三:设置代码规范与风格 ESLint配置:...
VITE_BASE_PATH = '/' 在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{...
一、 使用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.将打包后...
在这种组合项目在部署时候经常会遇到这样或那样的问题,接下对于部署的时候遇到的一些问题罗列以及一些解决方案: nginx部署如图: nginx配置 1.部署后资源文件访问不对 访问资源js路径404 解决方案:在vite.config.production.ts(生产环境的配置文件),对应的base属性设置要部署的目录‘/arcodesignpro/’,如下图: ...
在Vue项目中使用Vite进行打包,并配置相对路径部署,可以确保你的应用在不同的部署路径下都能正常访问。以下是详细的步骤和配置说明: 1. 理解Vite打包配置的基本概念和相对路径部署的需求 Vite 是一个现代的前端构建工具,它提供了快速的冷启动、即时热模块更新(HMR)以及丰富的插件生态。在部署Vue应用时,你可能希望应用...
vite vue3 打包nginx vue项目打包部署到linux 一. vue前端项目打包 使用vscode开发项目 ,在src的同级目录下创建一个vue.config.js文件(已有的话则修改相应内容),向其中写入配置信息并保存: module.exports = { publicPath: './', outputDir: 'dist',
在这种组合项目在部署时候经常会遇到这样或那样的问题,接下对于部署的时候遇到的一些问题罗列以及一些解决方案: nginx部署如图: nginx配置 1.部署后资源文件访问不对 访问资源js路径404 解决方案:在vite.config.production.ts(生产环境的配置文件),对应的base属性设置要部署的目录‘/arcodesignpro/’,如下图: ...
Vite部署静态站点官方文档 一、本地打包测试 构建应用(打包) npm run build 默认情况下,构建会输出到 dist 文件夹中。 本地测试应用 当你构建完成应用后,你可以通过运行npm run preview命令,在本地测试该应用,利用好控制台,找BUG修BUG。 每次修改代码后要先build构建打包再preview本地测试才能显示出修改代码后最新...
打包之后打开项目空白,需要配置vite.config.js中的base基础路径为'./' 环境变量: Vite在一个特殊的import.meta.env对象上暴露环境变量 import.meta.env.MODE: String 应用运行的环境模式 import.meta.env.BASE_URL: String 应用正在被部署在的base URL,由base配置项决定 ...
新项目是VUE3+VITE4做前端,后端是FastAPI,开发环境中前端访问后端正常,没有任何问题,打包部署到服务器上前端始终无法访问后端服务器,在网上查了很多资料,解决方法其实是有问题。现记录如下,备查。 一、前端配置的问题 前端vite.config.ts里的代理配置只适用开发环境,和正式环境无关!!