时间戳

首页 > 解决方案 > Vue.js 将 javascript 文件路由为索引页面

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

问题描述

我有几个 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 项目中，因为它们不是npm使用export并依赖于全局包含在头部中才能正常运行的包？

标签： javascripthtmlvue.jsvue-componentvue-router

解决方案

Unexpected token '<'

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

作为故障排除步骤（让您看得404更清楚），您可以将项目配置为禁用开发服务器回退devServer.historyApiFallback=false：

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

静态资产

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

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

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

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

推荐阅读