vite + vue3 接入 babel 的两种方式

一、使用 @vitejs/plugin-legacy

pnpm i -D @vitejs/plugin-legacy
// vite.config.ts
const config = {
	plugins: [
		legacy({
		     targets: [
		         '> 1%',
		         'not ie 11',
		         'not op_mini all',
		         'chrome >= 78',
		         'edge >= 78',
		         'firefox >= 72',
		         'safari >= 13',
		         'opera >= 67',
		     ],
		 }),
	]
}

二、使用 @rollup/plugin-babel
vite 的 library 模式不支持 @vitejs/plugin-legacy 插件,所以只能使用 @rollup/plugin-babel:

pnpm i -D @babel/plugin-transform-runtime @babel/preset-env @babel/runtime @rollup/plugin-babel
import { fileURLToPath, URL } from 'node:url'
import { resolve } from 'path'
import type { ConfigEnv, UserConfigExport } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import svgLoader from 'vite-svg-loader'
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
import babel from '@rollup/plugin-babel'

// https://vitejs.dev/config/
export default ({ command, mode }: ConfigEnv): UserConfigExport => {
    const config: UserConfigExport = {
        plugins: [vue(), vueJsx(), cssInjectedByJsPlugin(), svgLoader()],
        resolve: {
            alias: {
                '@': fileURLToPath(new URL('./src', import.meta.url)),
            },
        },
        build: {
            minify: 'terser',
            terserOptions: {
                compress: {
                    drop_console: true,
                    drop_debugger: true,
                },
            },
            lib: {
                entry: resolve(__dirname, 'src/index.ts'),
                name: 'IntegrationPlatformNavbar',
                fileName: 'integration-platform-navbar',
            },
            rollupOptions: {
                // 确保外部化处理那些你不想打包进库的依赖
                external: ['vue', 'element-plus'],
                output: {
                    // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
                    globals: {
                        vue: 'Vue',
                        'element-plus': 'ElementPlus',
                    },
                },
                plugins: [
                    babel({
                        extensions: ['.js', '.ts', '.vue'],
                        babelHelpers: 'runtime',
                        plugins: ['@babel/plugin-transform-runtime'],
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    useBuiltIns: false,
                                    targets: {
                                        browsers: ['last 2 versions', '> 1%', 'not ie <= 11'],
                                    },
                                },
                            ],
                        ],
                    }),
                ],
            },
        },
    }

    return config
}

  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在浏览器环境中,使用 Node.js 的 fs 模块是不被允许的。因此,如果使用 Electron + Vite + Vue 开发应用程序,需要使用 Electron 提供的 API 来进行文件系统操作。 在 Electron 中,可以使用 Node.js 的 fs 模块,因为 Electron 应用程序是基于 Chromium 和 Node.js 构建的。如果需要在 Vue 中使用 Electron 的 fs 模块,可以通过 Vue 的插件机制来实现。 首先,在 Electron 主进程中添加一个模块来暴露 fs 对象: ```javascript // main.js const { app, BrowserWindow } = require('electron') const fs = require('fs') let mainWindow = null function createWindow() { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, }, }) mainWindow.loadFile('index.html') mainWindow.on('closed', function () { mainWindow = null }) // 将 fs 模块暴露给 Vue 实例 mainWindow.fs = fs } app.on('ready', createWindow) app.on('window-all-closed', function () { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', function () { if (mainWindow === null) { createWindow() } }) ``` 然后,在 Vue 的插件中使用 fs 对象: ```javascript // fs-plugin.js export default { install: (Vue) => { Vue.prototype.$fs = window.require('electron').remote.getCurrentWindow().fs }, } ``` 最后,在 Vue 应用程序中使用插件即可: ```javascript // main.js import Vue from 'vue' import App from './App.vue' import fsPlugin from './plugins/fs-plugin' Vue.use(fsPlugin) new Vue({ render: (h) => h(App), }).$mount('#app') ``` 在 Vue 组件中,可以像这样使用 $fs 对象: ```javascript this.$fs.readFile('/path/to/file', (err, data) => { if (err) throw err console.log(data) }) ``` 需要注意的是,读取本地文件需要应用程序有相应的权限,可以在 package.json 文件中添加以下配置来获取权限: ```json { "name": "my-app", "version": "0.1.0", "main": "main.js", "scripts": { "start": "electron .", "postinstall": "electron-builder install-app-deps" }, "build": { "appId": "com.example.myapp", "productName": "My App", "directories": { "output": "dist_electron" }, "files": [ "dist/**/*", "main.js", "package.json" ], "extraResources": [ { "from": "assets", "to": "assets" } ], "dmg": { "contents": [ { "x": 110, "y": 150 }, { "x": 480, "y": 150, "type": "link", "path": "/Applications" } ] }, "mac": { "category": "public.app-category.developer-tools", "icon": "assets/icon.icns" }, "win": { "target": [ "nsis", "msi" ], "icon": "assets/icon.ico" }, "linux": { "category": "Development", "icon": "assets/icon.png" } }, "dependencies": { "electron": "^13.1.1" }, "devDependencies": { "@vue/cli-plugin-babel": "^4.5.0", "@vue/cli-plugin-eslint": "^4.5.0", "@vue/cli-service": "^4.5.0", "babel-eslint": "^10.1.0", "electron-builder": "^22.11.7", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", "vue-template-compiler": "^2.6.11" }, "buildResources": "public" } ``` 在 package.json 文件中添加了 "buildResources": "public" 配置,表示将 public 目录下的文件打包到应用程序中。如果需要读取 public 目录下的文件,可以使用相对路径来访问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值