Cannot create Vue application http-server - Error: css and js files 404 Not found

Question

我想 docker 化我的 vue 应用程序，但是当我运行它在 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/

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

刚接触 vue，如有任何帮助，我们将不胜感激！

Answer 1

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

您应该做的是将您的图像从 assets 移动到 public 目录。然后通过 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

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

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

Cannot create Vue application http-server - Error: css and js files 404 Not found

Cannot create Vue application http-server - Error: css and js files 404 Not found

javascript

docker

webpack

vue.js

vue-cli