vue2将webpack改为vite

1、修改环境变量:之前vue-cli使用的是VUE_APP开头的环境变量,vite使用的是VITE_开头的环境变量,所以需要修改环境变量。

2、修改环境变量引用:vue-cli使用的是process.env而vite使用的是import.meta.env。

3、index.html文件改动:

1、vite默认会从根目录找index.html文件,所以确保index.html在根目录下。

2、如果有使用HtmlWebpackPlugin插件,在vite中需要使用vite-plugin-html插件。

4、修改page.json文件:

1、运行命令"dev": "vite", 打包命令"build": "vite build"

2、删除core.js包、删除 "@vue/cli-*"相关包、删除sass-loader包、删除babel-*相关包

3、安装 "@vitejs/plugin-vue": "^1.6.1"、"vite": "^2.9.18"、"vite-plugin-vue2": "^1.9.0",

5、删除魔法注解:/* webpackChunkName: "XXXX" */,vite中魔法注释不生效,也可以不删除

6、新增vite.config.js文件:基础配置:

javascript 复制代码
import { defineConfig } from 'vite'
import { createVuePlugin as vue } from "vite-plugin-vue2" // 重要-vue2需要使用

const path = require("path")
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
  },
  esbuild: {
    // 此配置是为了在vue中使用jsx
    jsxFactory: "h",
    jsxFragment: "Fragment",
    jsxInject: "import { h } from 'vue';",
  }
})

7、删除babel.config.js

8、jsx使用需要在script标签中添加lang="jsx",如:<script lang="jsx">

9、批量引入文件:webpack中使用require.context()批量引入文件,vite中使用import.meta.glob()批量引入文件。

10、全局scss文件:在vite.config.js中配置scss全局样式,且不能再在vue文件中使用import引入,还没找到怎么在template中使用全局样式的方法,如:

javascript 复制代码
css: {
        preprocessorOptions: {
            scss: {
                javascriptEnabled: true,
                additionalData: `
                    @import '文件路径';
                    @import '文件路径';
                `
            }
        }
}

11、将使用的node_modules里使用的包单独打包出来:

javascript 复制代码
build: {
    "minify":false,
    "rollupOptions":{
      "output":{
        "manualChunks":(id)=>{
          if(id.includes('node_modules')){
            return 'vendor';
          }
        }
      }
    }
  }

参考文档:https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/

相关推荐
科兴第一吴彦祖21 小时前
在线会议系统是一个基于Vue3 + Spring Boot的现代化在线会议管理平台,集成了视频会议、实时聊天、AI智能助手等多项先进技术。
java·vue.js·人工智能·spring boot·推荐算法
universe_0121 小时前
day27|前端框架学习
前端·笔记
沙尘暴炒饭21 小时前
前端vue使用canvas封装图片标注功能,鼠标画矩形框,标注文字 包含下载标注之后的图片
前端·vue.js·计算机外设
百思可瑞教育21 小时前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
yinuo1 天前
Uni-App跨端实战:APP的WebView与H5通信全流程解析(03)
前端
yinuo1 天前
Uni-App跨端实战:支付宝小程序WebView与H5通信全流程解析(02)
前端
GISer_Jing1 天前
sqb&ks二面(准备)
前端·javascript·面试
谢尔登1 天前
【Webpack】模块联邦
前端·webpack·node.js
前端码虫1 天前
2.9Vue创建项目(组件)的补充
javascript·vue.js·学习
Bottle4141 天前
深入探究 React Fiber(译文)
前端