无法创建 Vue 应用程序 http-server - 错误：css 和 js 文件 404 未找到

Posted 2023-02-22

【中文标题】无法创建 Vue 应用程序 http-server - 错误：css 和 js 文件 404 未找到

【英文标题】：Cannot create Vue application http-server - Error: css and js files 404 Not found

【发布时间】：2021-10-04 09:40:46

【问题描述】：

我想 dockerize 我的 vue 应用程序，但是当我在 docker 容器中运行它时，浏览器中没有加载任何内容。

由于我在 Dockerfile 中运行 CMD["http-server", "dist"]，因此我决定在本地对其进行测试以解决问题。

运行： npm run serve

工作正常，我得到：

然后我跑

npm run build

我相信这是由于在 assets 目录中有一个包含 50,000 多张 jpeg 图像的海报文件夹，我在应用程序中动态显示如下：

<div v-for="movie in this.recommendations" :key="movie" class="movie-card col-md-2">

 <img v-if="movie['poster']=='True'" :src="getImgUrl(movie['movieId'])" v-bind:>

And the getImgUrl function is:

getImgUrl(imgName) 
            var images = require.context('../assets/posters', false, /\.jpg$/)
            return images('./' + imgName + ".jpg")
    

vue/cli 建议

webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/ 

但我不确定如何实现其中之一或 如果将图像托管在公共谷歌驱动器上并从那里导入它们会解决问题吗？

vue 新手，非常感谢任何帮助！

【参考方案1】：

通过使用资产文件夹和require，您将所有图像捆绑到您的代码中，将它们编码为base64。因此，当它被编译时，它正在创建 GIANT 块。因为图片是编译成源码的。

您应该做的是将图片从资产移至公共目录。然后通过 HTTP 加载图像。这意味着您的代码和图像保持分离。当页面加载时，浏览器会从您的代码中单独请求图像，并将它们加载到文件中。

例如

<img v-if="movie['poster']=='True'" :src="getImgUrl(movie['movieId'])" v-bind:>

getImgUrl(imgName) 
     return `/posters/$imgName.jpg`

这样你的目录结构就会变成

-public
-|--posters
-|--|--Poster1.jpg
-|--|--Poster2.jpg
-|--|--Poster3.jpg
-|--|--Poster4.jpg
etc

过度简化的公共目录充当网络服务器。可以直接访问其中的任何内容。例如，如果您要将图像移动到具有上述目录结构的公共目录，并访问 localhost:8080/posters/Poster1.jpg，它将仅加载图像，甚至不需要 Vue 路由器。

要更好、更深入地描述公用文件夹及其作用，请查看docs。

【讨论】：

太棒了，非常感谢！它现在可以在最初的一小部分时间内编译。