由webpack改为vite遇到的问题总结

1.process is not defined

vite中想要获取当前 node运行时状态需要使用

import.meta.env

扩展当我们想使用我自己定义的变量

例如:

VUE_APP_BASE_API = ''
VUE_APP_DOWNLOAD=''
VUE_APP_MAP_URL=''

 我们需要改成

VITE_APP_BASE_API = ''
VITE_APP_DOWNLOAD=''
VITE_APP_MAP_URL=''

调用时 import.meta.env.VITE_APP_BASE_API 

2.获取文件

在webpack中我们之前获取文件通过的require 的方式,在vite中我们使用的是

import.meta.globEager

例如:

webpack

const req = require.context("@/assets/icons", false, /\.svg$/);
const requireAll = (requireContext:any) => requireContext.keys().map(requireContext);
requireAll(req);

vite

const files = import.meta.globEager("@/assets/icons/*.svg") // vite
 
const modules: any = {};
 
const requireAll = (files:any)=>{
    for (const key in files) {
        if (Object.prototype.hasOwnProperty.call(files, key)) {
            modules[key.replace(/(\.\/|\.svg)/g, '')] = files[key].default
        }
    }
}
requireAll(files)

3.index.html的问题

        index.html 需要放到 跟vite.config.js同一层级,另需要 引入main.js在index.html中配置

例: 

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

4.vue/compiler-sfc. is not find module xxxx

有可能是当前的vue版本过低导致