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

Question

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

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

运行： npm run serve

工作正常，我得到：

然后我跑

npm run build

我相信这是由于我在应用程序中动态显示的资产目录中有一个包含 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:alt="pic">

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 很新，所以任何帮助将不胜感激！

Answer 1

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

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

例如

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

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

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

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

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

如需更好、更深入地描述公用文件夹及其服务，请查看文档。