截至2024年9月，vue-cli已经不怎么更新了，vue-cli基于webpack创建，迁移到vite的成本并不算低，还好有rsbuild，兼容webpack，让迁移成本大大降低。

rsbuild 是rspack的上层封装，配置更简单些。

依赖安装



json


代码解读


复制代码


// package.json { "scripts": { "dev": "rsbuild dev --env-mode serve", "build": "rsbuild build --env-mode build", //... }, "dependencies": { "vue": "^3.5.8", //... }, "devDependencies": { "@rsbuild/core": "^1.0.1", "@rsbuild/plugin-babel": "^1.0.1", "@rsbuild/plugin-sass": "^1.0.1", "@rsbuild/plugin-vue": "^1.0.1", "@rsbuild/plugin-vue-jsx": "^1.0.1", //... } } 


在vite里面用--mode可以指定读取哪一个env文件，在rsbuild下用--env-mode。


rsbuild配置


项目根目录下rsbuild.config.ts




ts


代码解读


复制代码


import { defineConfig, loadEnv } from "@rsbuild/core"; import { pluginBabel } from "@rsbuild/plugin-babel"; import { pluginVue } from "@rsbuild/plugin-vue"; import { pluginVueJsx } from "@rsbuild/plugin-vue-jsx"; import { pluginSass } from "@rsbuild/plugin-sass"; const { parsed, publicVars } = loadEnv({ prefixes: ["VUE_APP_"] }); export default defineConfig({ source: { entry: { index: "./src/main.ts", }, define: { ...publicVars, }, }, html: { template: "./public/index.html", templateParameters: { VUE_APP_TITLE: parsed.VUE_APP_TITLE, }, }, plugins: [ pluginBabel({ include: /\.(?:jsx|tsx)$/, }), pluginVue(), pluginVueJsx(), pluginSass(), ], server: { port: 4433, proxy: { "/api": { target: "http://proxy.com/api/", changeOrigin: true, pathRewrite: { "^/api": "", }, }, }, }, }); 


    
 
  • loadEnv可以读取.env文件的配置，通过publicVars加到client端
    • 
 
  • index.html 文件的变量可以通过配置templateParameters修改
    • 



index.html配置




html


代码解读


复制代码


<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <link rel="icon" href="<%= assetPrefix %>/favicon.ico" /> <title><%= VUE_APP_TITLE %></title> <body> <noscript> <strong >We're sorry but doesn't work properly without JavaScript enabled. Please enable it to continue.</strong > </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> 


    
 
  • assetPrefix相当于vite下的base,是静态文件前缀，可以通过output.assetPrefix修改
    • 
 
  • VUE_APP_TITLE在html.templateParameters修改
    • 



tsconfig.json配置




json


代码解读


复制代码


{ "compilerOptions": { "jsx": "preserve", "jsxImportSource": "vue", "types": [ "@rsbuild/core/types", //... ], "paths": { "@/*": ["src/*"] }, //... }, //... } 


    
 
  • jsx 配置"jsx": "preserve"，"jsxImportSource": "vue"
    • 
 
  • compilerOptions.types添加 @rsbuild/core/types
    • 



注意事项


    
 
  • process和import.meta不能在client端，也就是vue文件等直接解构使用，需要写全
    • 





ts


代码解读


复制代码


const NODE_ENV = process.env.NODE_ENV; const MODE = import.meta.env.NODE 


现在你的项目就可以享受火箭般的速度啦。





 
原文链接：https://juejin.cn/post/7418771710453825551


 
  

        # rust
      
        # vue.js
      
        # 开发语言
      
  
 
 Logo 
魔乐社区
 
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
 
 
  
更多推荐
  
cover
 
全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程
 
 
avatar 魔乐社区
 
 
Pont - 搭建前后端之桥：高效、灵活的接口管理工具
 
Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda
 
avatar 魔乐社区
 
 
如何快速上手 hvac：HashiCorp Vault Python 客户端零基础入门指南
 
**hvac** 是 HashiCorp Vault 的 Python 3.X 客户端库，专为开发者提供简单高效的 Vault 交互方式。无论你是需要管理密钥、配置身份验证，还是实现安全的秘密数据存储，hvac 都能帮助你轻松搞定 Vault 的各项操作。本文将带你零基础快速入门，从安装到基础操作，让你在几分钟内即可上手使用这个强大的工具。[![hvac 客户端 Logo](https://r
 
avatar 魔乐社区