vs怎么建手机网站,郑州建站系统在线咨询,超市型网站开发,厦门旅游网站设计VUE2 中使用 Webpack 打包、开发#xff0c;每次打包时间太久#xff0c;尤其是在开发的过程中#xff0c;本文记录一下 VUE2 升级Vite 步骤。
安装 Vue2 Vite 依赖
dev 依赖
vitejs/plugin-vue2: ^2.3.3
vitejs/plugin-vue2-jsx: ^1.1.1
vite每次打包时间太久尤其是在开发的过程中本文记录一下 VUE2 升级Vite 步骤。
安装 Vue2 Vite 依赖
dev 依赖
vitejs/plugin-vue2: ^2.3.3
vitejs/plugin-vue2-jsx: ^1.1.1
vite: ^5.0.0
#选装自动添加后缀
vite-plugin-resolve: ^2.5.2npm 脚本 scripts: {dev: vite,build: vite build,serve: vite preview},vite.config.js
import { defineConfig } from vite;
import vue from vitejs/plugin-vue2;
import vue2Jsx from vitejs/plugin-vue2-jsx;import path from path;export default defineConfig({plugins: [vue(), vue2Jsx(),{name: resolve-file-extension,resolveId(source, importer) {// Skip absolute paths or non-relative importsif (!importer || !source.startsWith(.) || source.includes(?)) {return null;}const extensions [.vue, .js, .ts, .jsx, .tsx]; // Add supported extensionsfor (const ext of extensions) {try {const resolvedPath require.resolve(source ext, { paths: [importer] });return resolvedPath;} catch (e) {continue;}}return null;},},],resolve: {extensions: [.vue, .js, .jsx, .ts, .tsx],alias: {: path.resolve(__dirname, ./src), // Alias to src directory},},server: {host: 0.0.0.0,port: 8080,open: true,proxy: {/api: {target: http://localhost:8090/, // Target server for /api requestsrewrite: (path) path.replace(/^\/api/, /), // Remove /api prefixchangeOrigin: true, // Handle CORS},},},css: {preprocessorOptions: {less: {modifyVars: {// Uncomment and define your custom LESS variables here// primary-color: #377DF6,// link-color: #377DF6,},javascriptEnabled: true, // Enable JavaScript in LESS},},},build: {sourcemap: process.env.NODE_ENV development, // Source maps for development},
});index.html
将 Index.html 从 public 移动到根目录下与 webpack 相关的去掉。
!DOCTYPE html
html langheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width,initial-scale1.0link relicon href./favicon.icotitleTestTTT/title
/headbodynoscriptstrongWere sorry,work properly without JavaScript enabled.Please enable it to continue./strong/noscriptdiv idapp/divscript typemodule src/src/main.js/script!-- built files will be auto injected --
/body/htmljsx
如果你的项目中使用了 jsx需要在 script 中制定 langjsx
script langjsx
export default {props:[title, open, label],data() {return {}},
}
/script总结
Vue2 升级 Vite 比较顺利几点要注意的:
用 Vite 5.0jsx 插件只支持到 Vite 5.0Webpack 语法要移除其他遇到问题让豆包把代码修改为 Vite 方式即可
