一、 使用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.将打包后...
在Vue 3项目中,Vite可以作为构建工具来优化开发体验和生产构建性能。 Vue3项目中使用Vite进行打包的基本命令: 在Vue 3项目根目录下,执行以下命令进行打包: bash npm run build 这个命令会触发Vite的构建过程,将项目打包成可部署的静态资源文件,通常放置在dist目录下。 验证并确认打包命令的正确性: 执行上述命令...
tauri-app// Vite打包后的静态资源位置,默认../dist,可以直接回车✔Whereare your web assets located? ..// 本地启动Vite开发服务url✔Whatis the urlofyour dev server?http://localhost:5173// 启动前端开发环境命令,默认 npm run dev✔Whatis your frontend dev command? npm run dev// 前端构建命令...
Vue3项目的打包运行 一.项目打包(vite创建的项目) 执行以下这条命令对项目进行打包 npm run build 生成dist文件夹,进入dist文件夹下的index.html文件,然后右键选择Open with Live Serve开启一台端口号为5500的本地服务器来打开网页,发现404错误. 这是因为index.html文件中引入的资源路径以项目根目录开始,我们需要在...
一、Vue3 项目打包 我们来回顾一下前面的调试运行命令: npm run dev 1. 执行后输出: VITE v5.4.9 ready in 483 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window ...
二、打包分析 官网https://www.npmjs.com/package/rollup-plugin-visualizer 1. 安装 pnpm i rollup-plugin-visualizer-D 1. 2.vite.config.ts配置 import{visualizer}from'rollup-plugin-visualizer'// https://vitejs.dev/config/exportdefaultdefineConfig({// ...plugins:[// ...visualizer({open:true,/...
vue-cli 自带的是 webpack 的打包方式,打出的包体积有点大,而 vite 自带的是 rollup 的打包方式,这种方式打包的体积就非常小,官网也有一些使用说明,所以学会之后还是比较很方便的。 vite 的库项目可以分为两类:(我自己分的) 一个是纯js的项目,不带HTML; ...
Vite部署静态站点官方文档 一、本地打包测试 构建应用(打包) npm run build 默认情况下,构建会输出到 dist 文件夹中。 本地测试应用 当你构建完成应用后,你可以通过运行npm run preview命令,在本地测试该应用,利用好控制台,找BUG修BUG。 每次修改代码后要先build构建打包再preview本地测试才能显示出修改代码后最新...