Vue.js 将 javascript 文件路由为索引页面答案

【问题标题】：Vue.js is routing javascript file as index pageVue.js 将 javascript 文件路由为索引页面
【发布时间】：2021-04-21 17:46:03
【问题描述】：

我有几个 JavaScript 文件，我想将它们全局包含在我的网页中。

在index.html 中，我包含了脚本：

<script type="text/javascript" src="./js/my-file.js"></script>

在控制台中，它给出了错误：

Uncaught SyntaxError: Unexpected token '<'

当我直接在 http://localhost:8080/js/my-file.js 访问 URL 时，它会将 index.html 页面显示为内容而不是 JavaScript 文件的内容：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">
    <title>main-interface-2</title>
    <script type="text/javascript" src="/js/my-file.js"></script>
  <link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but main-interface-2 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>

我认为这可能是因为我的路径错误，或者 Vue 路由器在不应该路由 JavaScript 页面。

我如何将常规 JavaScript 文件全局包含到我的 Vue 项目中，因为它们不是使用 export 的 npm 包，并且依赖于全局包含在头部中才能正常运行？

【问题讨论】：

标签： javascript html vue.js vue-component vue-router

【解决方案1】：

`Unexpected token '<'`

听起来您的 JavaScript 文件在指定的 URL 中不存在，因此 Webpack 开发服务器正在回退到 public/index.html，导致 <script> 标记无法将 HTML 解析为 JavaScript。

作为故障排除步骤（让您更清楚地看到404），您可以configure your project 使用devServer.historyApiFallback=false 禁用开发服务器回退：

// vue.config.js
module.exports = {
  devServer: {
    historyApiFallback: false
  }
}

静态资产

将您的静态 JavaScript 文件复制到 public folder 下的位置，以便它们自动捆绑：

<projectRoot>/public/js/my-file.js

然后你可以像这样在public/index.html 中使用它：

<script src="/js/my-file.js">

【讨论】：

【解决方案2】：

您可以将脚本标签添加到您的app.vue：

<template>
  <div>
    <script defer src="https://address/to/myscript.js"></script>
  </div>
<template>

甚至可以像这样将它添加到头部：

mounted() {
      let script = document.createElement("script");
      script.src =  "https://address/to/myscript.js";
      document.head.appendChild(script);
}

【讨论】：

脚本标签在模板中被忽略

Unexpected token '&lt;'

静态资产

`Unexpected token '<'`