英文:
How do I import Buffer in a Quasar application running Vite?
问题
我正在尝试在我的Quasar应用程序中使用eth-crypto模块，该应用程序使用Vite。
由于无法找到Buffer对象，它引发了错误，这是有道理的，因为它在前端中不存在。
是否有一种良好的方式来导入polyfill？
到目前为止，我已经在我的quasar.config.js文件中尝试了以下内容：
const { configure } = require('quasar/wrappers');
const path = require('path');
const buffer = require('buffer');
module.exports = configure(function (ctx) {
return {
// ...
build: {
target: {
browser: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
node: 'node16'
},
vueRouterMode: 'hash', // 可用值: 'hash', 'history'
// vueRouterBase,
// vueDevtools,
// vueOptionsAPI: false,
// rebuildCache: true, // 重新构建Vite / linter /等缓存
// publicPath: '/',
// analyze: true,
env: {
VUE_APP_API: ctx.dev
? 'http://localhost:3000'
: 'https://prod.api.com'
},
rawDefine: {
global: {},
buffer: buffer,
Buffer: buffer.Buffer
},
// ignorePublicFolder: true,
// minify: false,
// polyfillModulePreload: true,
// distDir
// extendViteConf (viteConf) {},
// viteVuePluginOptions: {},
vitePlugins: [
['@intlify/vite-plugin-vue-i18n', {
// 如果要使用Vue I18n Legacy API，您需要设置`compositionOnly: false`
// compositionOnly: false,
// 您需要设置包括路径的i18n资源！
include: path.resolve(__dirname, './src/i18n/**')
}],
[
'vite-plugin-bundle',
{
entries: [
]
}
]
],
}
}
});
这不起作用，而且我不确定如何导入Buffer对象，以便它对npm模块可用。
英文:
I am trying to use the eth-crypto module in my Quasar app which uses Vite.
It is throwing errors due to not finding the Buffer object, which makes sense, since it's in the front end.
Is there a good way to import a polyfill?
So far, I've tried the following in my quasar.config.js file:
const { configure } = require('quasar/wrappers');
const path = require('path');
const buffer = require('buffer');
module.exports = configure(function (ctx) {
return {
...
build: {
target: {
browser: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
node: 'node16'
},
vueRouterMode: 'hash', // available values: 'hash', 'history'
// vueRouterBase,
// vueDevtools,
// vueOptionsAPI: false,
// rebuildCache: true, // rebuilds Vite/linter/etc cache on startup
// publicPath: '/',
// analyze: true,
env: {
VUE_APP_API: ctx.dev
? 'http://localhost:3000'
: 'https://prod.api.com'
},
rawDefine: {
global: {},
buffer: buffer,
Buffer: buffer.Buffer
},
// ignorePublicFolder: true,
// minify: false,
// polyfillModulePreload: true,
// distDir
// extendViteConf (viteConf) {},
// viteVuePluginOptions: {},
vitePlugins: [
['@intlify/vite-plugin-vue-i18n', {
// if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
// compositionOnly: false,
// you need to set i18n resource including paths !
include: path.resolve(__dirname, './src/i18n/**')
}],
[
'vite-plugin-bundle',
{
entries: [
]
}
]
],
}
}
This doesn't work and I'm frankly not sure how to import the Buffer object so that it will be available to npm modules.
答案1
得分: 1
我遇到了相同的问题，通过Polyfill插件并没有真正成功解决这个问题。
我尝试添加另一个引导文件，作为quasar引导文件数组中的0索引。我不再收到错误消息，这可能对你有用。
在里面我有：
import { Buffer } from "buffer";
// @ts-ignore
window.Buffer = Buffer;
总的来说，最好找到一个支持你的环境的库。
英文:
I'm having the same issue and not really succeeding in fixing this through polyfill plugins.
I tried adding another boot file, as a 0 index in the quasar boot files array. I'm not getting the error anymore and it might work for you.
Inside I have:
import { Buffer } from "buffer";
// @ts-ignore
window.Buffer = Buffer;
Overall, it's probably best to find a library that supports your environment.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论