生产中的 Vue Js 无法正确显示文件答案

【问题标题】：Vue Js in production not displaying file correctly生产中的 Vue Js 无法正确显示文件
【发布时间】：2021-12-03 21:12:48
【问题描述】：

我刚刚完成了一个 Vue/Vuetify JS +Laravel API（后端）的开发。现在我正在尝试将其移至生产模式（移至新服务器）。我运行“npm run build”来生成用于生产的文件。它运行良好的命令，我已经提交了文件。但是，我的行为我不知道发生了什么。当我尝试访问该站点时，它似乎没有在我的 app.blade.php 文件中加载我的 JS 文件。以下是我的刀片中的内容。我已确认文件存在于服务器（公共文件夹）中。它只在页面上显示“scripts”。

<!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">
    <link rel=icon href=/favicon.ico>
    <title>vue-material-admin-full</title>
    <link href=/css/app.5ca87fdf.css rel=preload as=style>
    <link href=/css/hunk-vendors.ad1efc67.css rel=preload as=style>
    <link href=/js/app.2d64425d.js rel=preload as=script>
    <link href=/js/chunk-vendors.4fbac20a.js rel=preload as=script>
    <link href=/css/chunk-vendors.fbe3c9f7.css rel=stylesheet>
    <link href=/css/app.5ca87fdf.css rel=stylesheet>
</head>

<body><noscript><strong>We're sorry but vue-material-admin-full doesn't work properly without JavaScript enabled. Please
            enable it to continue.</strong></noscript>
    <div id=app></div><script src=/js/chunk-vendors.4fbac20a.js></script>___scripts____
</body>

</html>

这是我的 vue.config.js

module.exports = {
  // chainWebpack: config => {
  //   config.plugins.delete('prefetch');
  // },
  "transpileDependencies": [
    "vuetify"
  ],
  publicPath: '/app/',
  outputDir: '../../public/',
  indexPath: process.env.NODE_ENV === 'production'
  ? '/app'
  : '/'
}

【问题讨论】：

#1 你的 web 和 api 是在不同的主机上还是你在 laravel api 中托管 vue？ #2 您是否愿意在另一台主机上托管网络？ #3 附上错误的 Web 控制台日志 #4 你为什么使用 app.blade.php？ vue build 有自己的 index.html
#1：他们在。同一个主机。 #2：它必须在同一个主机上 #3：会得到 #4：不确定，我将其更改为 index.html。
如果 vue 构建托管在您的 laravel 的同一主机中，使用您的 vue 代码使用 ajax 使用 api 端点的 url 是什么？水疗中心可以独立部署检查这个pluralsight.com/guides/deploy-a-react-app-on-a-server
vue 和 api 已开启。同一个主机。是的，我正在向同一主机发出 ajax 请求，但我的路由使用前缀“/api”来使用 API。
只是为了确定 php 或 vue 是问题所在，请使用 http 服务器启动，例如：npmjs.com/package/http-server npmjs.com/package/serve 或 github.com/usil/nodeboot-spa-server 如果 vue 页面加载正确，请与我们分享

标签： laravel vue.js

【解决方案1】：

在您的生产构建完成后，您需要按照 Laravel 官方文档中提到的相同顺序链接您的 js 文件。

在 app.blade.php 文件的底部添加这些后重试。

Laravel - Compiling Assets

【讨论】：

【解决方案2】：

您应该使用<script> 标签来加载.js 文件。所以请替换您的以下代码

<link href=/js/app.2d64425d.js rel=preload as=script>
<link href=/js/chunk-vendors.4fbac20a.js rel=preload as=script>

有

<script src=/js/app.2d64425d.js rel=preload></script>
<script src=/js/chunk-vendors.4fbac20a.js rel=preload></script>

【讨论】：

谢谢。确实如此。很好的收获。