webpack转vite差异记录

1. 不支持 @ 指向 src 目录

2. 不支持省略后缀名

3. 不支持省略写index和main

以上都需要在vite.config.js中添加配置

// npm i path
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    extensions: ['.js', '.ts', '.json', '.vue', '.css', '.scss'],  // 自动补全后缀名
    mainFiles: ['index', 'main'], // 自动识别 index 和 main 文件
    alias: {
      '@': path.resolve(__dirname, 'src'), // 将 @ 指向 src 目录
    },
  },

4. 不支持require引入文件

webpack写法：

const data = require('./data.json')

require("@/assets/001.png")

vite写法：

import data from './data.json'

new URL('@/assets/001.png', import.meta.url).href

// 也可放在public下直接引入
"/assets/001.png"

5. 无法解析复杂（多层）动态路径，需要用/* @vite-ignore */ 注释来忽略警告

webpack写法：

 import('@/views' + x.component)

vite写法：

 import(/* @vite-ignore */  `../views${x.component}.vue`)

6. 环境变量命名和引入

webpack写法：

  VUE_APP_WEBSERVICE_API = 'http://baidu.com/'
  
  process.env.VUE_APP_WEBSERVICE_API

vite写法：

  VITE_APP_WEBSERVICE_API = 'http://baidu.com/'  
  
  import.meta.env.VITE_APP_WEBSERVICE_API