wp2vite
一個webpack轉換vite2的工具
安裝
npm install -g wp2vite
or
yarn global add wp2vite
啟動wp2vite
項目目錄下啟動wp2vite
// 執行wp2vite的命令行
wp2vite
// 安裝依賴
npm install
// 啟動項目
npm run dev // 如果原先你的項目有dev script，請執行下面的命令
or
npm run vite-start
配置
//vite.config.ts
import {
defineConfig,
} from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
import {
resolve
} from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),
styleImport({
libs: [{
libraryName: 'ant-design-vue',
esModule: true,
resolveStyle: (name) => {
return `ant-design-vue/es/${name}/style/index`
}
}]
}),
],
resolve: {
alias: {
'@': resolve('./src'),
}
},
build: {
//
},
css: {
preprocessorOptions: {
less: {
},
javascriptEnabled: true
}
}
},
base: './', // 打包路徑
server: {
host: '0.0.0.0',
port: 4000, // 服務端口號
open: false, // 服務啟動時是否自動打開瀏覽器
https: false,
cors: true, // 允許跨域
}
})
.env.development
NODE_ENV = development
VITE_API_DOMAIN = 'https://localhost:5001/'
.env.production
NODE_ENV = production
VITE_API_DOMAIN = 'http://localhost:8087/'
問題點
global is not defined
index.html頁面加入 global
<!DOCTYPE html>
<html lang="en">
<body>
<script>
global = globalThis
</script>
</body>
</html>
require is not defined
loading: require(logo)
//改
lazyPlugin.install(app, {
loading: '@/assets/img/blog/2.jpg',
error: '@/assets/img/blog/1.jpg'
})
<img v-lazy="require('/src/assets/img/' + res.img)" />
//改
<img v-lazy="'/src/assets/img/' + res.img" />