如何从实时 vue 站点 url 中删除端口号？

Posted 2023-02-22

【中文标题】如何从实时 vue 站点 url 中删除端口号？

【英文标题】：How can remove the port number from live vue site url?

【发布时间】：2021-11-20 11:06:20

【问题描述】：

在运行yarn serve 时，我没有从 URL 中显示端口号。现在，这显示为https://example.com:8080。我想从https://example.com 访问它们。

vue.config.js

module.exports = 
    chainWebpack: config => 
      config.plugins.delete('prefetch');
    ,
    devServer: 
        host: 'example.com',
        https: false,
        port: 8080, 
        public: 'example.com'
    , 

【参考方案1】：

用live server打开dist文件夹中的index.html

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案2】：

yarn serve 命令打开此端口以在本地为应用程序提供服务（用于测试/开发）。

如果您想创建应用程序，您可能需要运行：yarn run build

见SO - yarn build command

然后您可以上传生成的文件。查找build 或dist 目录或类似目录。

您可以将publicPath 添加到您的配置中：

module.exports = 
    publicPath: "./",
    chainWebpack: config => 
      config.plugins.delete('prefetch');
    ,
    devServer: 
        host: 'example.com',
        https: false,
        port: 8080, 
        public: 'example.com'
    , 

你可以试试这个，看看它是否有效。

见webpack configuration docs

【讨论】：

我试过了，但是在运行 yarn run build 之后，如果我运行 index,html 文件，我会得到 'dist' 文件夹，我会得到白色的空白页。

是的，没错，dist 文件夹中就有应用程序。您在浏览器控制台中遇到什么错误？

GET example.us/css/app.c52c71c3.css net::ERR_ABORTED 404（未找到）example.us/:14 GET example.us/css/chunk-vendors.552a1056.css net::ERR_ABORTED 404（未找到）example.us/:14 GET example.us/js/app.8b633902.js net::ERR_ABORTED 404（未找到）（索引）：12 GET example.us/styles/_fontawesome.min.css net::ERR_ABORTED 404（未找到）example.us/:14 GET example.us/js/chunk-vendors.8b9cfb1c.js net::ERR_ABORTED 404（未找到）example.us/ :14 GET example.us/js/app.8b633902.js net::ERR_ABORTED 404（未找到）

我收到这样的错误。

您将example.us 配置为应用程序的域。这就是它试图从那里读取文件的原因。不要使用example.us。域名是一个示例，您应该将其替换为您自己的 - 或保留相对文件名。