Vue 3 将本地静态文件包含到 index.html 中

问题描述

<!DOCTYPE html>
<html lang="">
  <head>
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="semantic/dist/semantic.min.css">

我有一个基本的 Vue 3 项目,我想在我的 public/index.html 文件中包含来自根目录的文件(例如 node_modules 或我的 semantic 文件夹)

我在 vue.config.js 文件中尝试了各种配置,但似乎没有一个有效。

module.exports = {
  publicPath: '',}

将自定义本地 css/js 文件包含到 index.hmtl 中而不将它们直接移动到 public 目录的正确方法是什么?

解决方法

我前段时间遇到了类似的问题,我也在这里问过,但我自己找到了解决方案,这里是 link,我是如何使用自己的 webpack 配置的,它可能与您需要的有所不同做,但我认为核心是相同的,文件加载器上的 esModule 选项与我想要加载的本地文件的路径混淆。

相关问答

错误1:Request method ‘DELETE‘ not supported 错误还原:...
错误1:启动docker镜像时报错:Error response from daemon:...
错误1:private field ‘xxx‘ is never assigned 按Alt...
报错如下,通过源不能下载,最后警告pip需升级版本 Requirem...