vue生产模式下静态资产url中的“localhost”

Posted 2023-02-22

【中文标题】vue生产模式下静态资产url中的“localhost”

【英文标题】："localhost" inside static assets url on vue production mode

【发布时间】：2020-04-30 04:07:19

【问题描述】：

我确实将我的项目部署到 Firebase 托管，但问题是我在某些请求图像的请求时收到以下错误。然而，我的图片在我的网站上完美显示：

加载资源失败：net::ERR_CONNECTION_REFUSED

注意请求中的路径包含http://localhost:8000/img/而不是http://mydomain/img/

这是我如何定义图像路径的最小示例：

<v-img :src="require('@/assets/img/sellings.png')" />

我确实在路由器中启用了历史 (mode: 'history') 模式

此外，在 firebase.json 配置中，我确实有以下内容：

"hosting": 
    "public": "dist/",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      
        "source": "**",
        "destination": "/index.html"
       
    ]

在vue.config.js 我确实有以下内容：

global.__rootDirname = path.join(__dirname, 'dist')

导致问题的原因是什么？任何帮助表示赞赏。

【问题讨论】：

如何启动服务器？

@MickaelB。在本地主机上我做npm run serve，在我部署到生产之前我做npm run build

这可能是CORS错误，协议、域和端口必须匹配。即使最终的目标相同，写入的地址和当前的 URL 也会在某个时间点进行比较。

npm run serve中的命令是什么

【参考方案1】：

如果您使用vue-cli-service，您可以使用--host 或--public 参数

$ npx vue-cli-service serve --help
    --host         specify host (default: 0.0.0.0)
    --public       specify the public network URL for the HMR client

所以尝试运行

npx vue-cli-service serve --public mydomain

或

npm run serve -- --public mydomain

【讨论】：

问题出在生产模式。我在本地主机上没有问题。

您给定的命令都将在本地为我的应用程序提供服务。 npm run build 有一些东西会生成错误的网址。

您的npm run build 中有什么内容？

npm run build 是将项目构建为静态资产的命令。这不是我的书面命令。

检查package.json 文件，转到scripts 属性，然后转到build 并复制粘贴那里的内容。 serve 属性也一样