Electron Vue 打包后正确加载 CSS 字体文件

在 Electron-Vue 中，可以在 'vue.config.js' 文件中设置 'chainWebpack' 来修改 webpack 的配置。在这里，我们可以使用 'file-loader' 来加载字体文件，并将字体文件复制到打包后的文件夹中。/n/n以下是一个示例 'vue.config.js' 文件：/n/njavascript/nconst path = require('path')/n/nmodule.exports = {/n chainWebpack: config => {/n // 处理字体文件/n config.module/n .rule('fonts')/n .test(//.(woff2?|eot|ttf|otf)(/?.*)?$/i)/n .use('file-loader')/n .loader('file-loader')/n .tap(options => {/n // 修改字体文件输出路径/n options.name = 'fonts/[name].[hash:8].[ext]'/n return options/n })/n .end()/n/n // 处理 CSS 中的字体路径/n config.module/n .rule('css')/n .test(//.css$/)/n .use('css-loader')/n .loader('css-loader')/n .tap(options => {/n // 添加字体文件路径/n options.url = true/n options.importLoaders = 1/n options.modules = {/n localIdentName: '[name]_[local]_[hash:base64:5]'/n }/n options.sourceMap = true/n options.import = true/n options.importFrom = [/n path.resolve(__dirname, 'src/renderer/styles/variables.css')/n ]/n return options/n })/n .end()/n }/n}/n/n/n在这个配置中，我们首先使用 'file-loader' 来处理字体文件，并将它们复制到 'fonts' 文件夹中。然后，我们在 'css-loader' 中添加了字体文件的路径，这样在 CSS 中引用字体时就能正确地加载它们。/n/n请注意，在这个示例中，我们在 'importFrom' 中指定了 CSS 文件的路径，这个文件中定义了字体文件的路径。如果你的 CSS 文件中已经包含了字体路径，你可以省略这个选项。