vue.js - 部署 vue 在构建后返回 unexpted token <

Question

到目前为止，我在部署我的 vue 项目并将其上传到我的网站时没有遇到任何问题。但是，我在跑步后突然收到以下错误消息

npm run build 

并上传我的 distfolder 中的文件。

Uncaught SyntaxError: Unexpected token '<' chunk-vendors.468a5298.js:1
Uncaught SyntaxError: Unexpected token '<' app.f775d578.js:1

我能注意到的唯一区别是 vue 现在似乎建议使用 yarn。

我做了一个新项目，只是为了使用纱线进行测试，但出现了同样的错误。

1. vue 创建我的应用程序
2. 纱线安装
3. 纱线服务
4. 纱线构建

将 distfolder 中的内容上传到我的网站 - 相同的错误消息

还有其他人经历过吗？

我的旧版本没有任何问题

我使用@vue/cli 4.5.6

我现在开始工作了。删除了我的 ftp 上的文件夹并创建了一个新文件夹。不知道这解决了它，但它确实:)

Answer 1

如果您将distnot 部署到 Web 的根目录，则可能的原因之一是静态资产路径不正确。确保生成的 css 和 jsnpm run build都从您的 Web 服务器导入到正确的路径

上dist/index.html，你会看到这样的东西

<link href=/js/chunk-....js rel=prefetch>

这意味着它是一个绝对路径（网络的根目录），当它应该是这样的dist文件夹的相对路径时：

<link href=js/chunk-....js rel=prefetch>

要轻松解决此问题，请添加publicPath key您的vue.config.js文件：

module.exports = {
  ...
  publicPath: ""
};

然后重建项目。