webpack2+vue2项目使用vite的过程记录把vue2+webpack2的项目打包工具替换为vite的全过程。

记录一下摸鱼时候把项目打包工具替换为vite的过程。

一操作过程

1 下载

npm install vite

npm init vite

npm install vite-plugin-vue2

2 入口文件修改

index.html文件添加main.js入口

<script type="module" src="/src/main.js"></script>

3 打包文件修改

package.json文件添加vite运行和打包的命令，删除webpack和babel相关文件

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:test": "vite build --mode test",
    "build:prod": "vite build --mode production",
    "preview": "vite preview"
  },

删除webpack.conf.js等相关配置文件，

删除.babelrc文件

4 配置不同环境

根据package.json的打包命令，创建.env .env.test .env.production文件分别标识开发，测试，生产环境配置。

ENV = 'development' 
VITE_BASE_URL='/api'
VITE_API_OUTPUT = 'dist'
VITE_API_DOMAIN =''

5在vite.config.js文件增加基础配置

import { createVuePlugin } from "vite-plugin-vue2";
import viteCompression from "vite-plugin-compression";
import { defineConfig, loadEnv } from "vite";
import { resolve } from "path";

export default ({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  return defineConfig({
    define: {
      "process.env": process.env,
    },
    // 插件列表
    plugins: [
      createVuePlugin({
        jsx: true, // jsx语法兼容处理 
      }),
      viteCompression(),
    ]
    // 别名
    resolve: {
      extensions: [".js", ".vue", ".json", ".less", "scss", "jsx"],
      alias: {
        vue$: "vue/dist/vue.esm.js",
        "@": resolve("src"),
      },
    },
    externals: {
    },
    // 打包配置
    build: {
      target: "modules",
      outDir: env.VITE_API_OUTPUT,
      assetsDir: "assets", // 指定生成静态资源的存放路径
      minify: "terser", // 混淆器，terser构建后文件体积更小
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true,
        },
      },
    },
        // 启动配置
    server: {
      open: true, // 启动后自动打开浏览器的页面
      hms: true, // 热更新
      proxy: {
        "/operation": {
          target:process.env.VITE_API_DOMAIN
        }
      },
    },
  });
};

二报错问题汇总

部分文件报jsx错误

[ERROR] The JSX syntax extension is not currently enabled

解决：<script lang="jsx">

elementui和iview样式文件的报错

原引用方式为@import '~iview/src/styles/index.less'，

把~替换为node_modules的地址，@import '../../../node_modules/iview/src/styles/index.less';

样式中使用calc

报错： Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0

解决： (1). npm install -g sass-migrator (2). 进入项目node_modules文件 (3). 执行sass-migrator division **/*.scss

4 [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files 解决：jsx

样式穿透

解决：用 :deep替换>>>和/deep/

修改模块声明和导入的报错

导出模块module.exports改为export ,并用import引入

vue实例挂载

报错：[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build
解决： vue初始化的<template>改为render形式

按需加载报错

问题：项目中使用webpack的require.ensure异步加载模块。
解决：vite不需要做按需加载，改为import导入模块。

使用require引入静态资源的问题

原因： require 是属于 Webpack 的方法

  data() {
    return {
      icon: require('../../../assets/img/big-screen/icon-8.png')
    };
  }

解决：使用vite-plugin-require-transform
https://github.com/WarrenJones/vite-plugin-require-transform

webpack2+vue2项目使用vite的过程记录

一 操作过程