Vue.js 将 javascript 文件路由为索引页面
Posted
技术标签:
【中文标题】Vue.js 将 javascript 文件路由为索引页面【英文标题】：Vue.js is routing javascript file as index page 【发布时间】：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 包，并且依赖于全局包含在头部中才能正常运行？
【问题讨论】：
【参考方案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);
【讨论】：
脚本标签在模板中被忽略以上是关于Vue.js 将 javascript 文件路由为索引页面的主要内容，如果未能解决你的问题，请参考以下文章
[JavaScript从入门到放弃系列] 高级篇11.Vue.js之路由part2
[JavaScript从入门到放弃系列] 高级篇10.是时候用Vue.js来写前端了（路由1）