托管一个 vue js 应用程序答案

【问题标题】：Hosting a vue js apllication托管一个 vue js 应用程序
【发布时间】：2021-11-07 04:12:21
【问题描述】：

我有一个运行良好的 Vue.js 应用程序。我有应用程序的域名和子域名，我想托管它。我的应用程序在本地运行，但是当我尝试向其添加子域名时，它显示 500 Internal server errors。我是第一次尝试托管一个网站，所以我不知道我做错了什么。

我的 Vue.js 配置文件如下所示：

const webpack = require('webpack');

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    // Set up all the aliases we use in our app.
    resolve: {
      alias: {
        'chart.js': 'chart.js/dist/Chart.js'
      }
    },
    plugins: [
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 6
      })
    ],
    devServer:{
     disableHostCheck: true,
       host: '0.0.0.0',
       port: 8080,
       public : 'spark.innovation.com',
    },
              
  },
  pwa: {
    name:' Dashboard',
    themeColor: '#344675',
    msTileColor: '#344675',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: '#344675'
  },
  pluginOptions: {
    i18n: {
      locale: 'en',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableInSFC: false
    }
  },
  css: {
    // Enable CSS source maps.
    sourceMap: process.env.NODE_ENV !== 'production'
  }
};

Nginx server configuration

 server {
  listen 80;
  listen 443;
  server_name spark.xxxx.com www.spark.xxx.com;
  root /home/ubuntu/frontend-app;
  index index.html index.htm;
  location / {
    root /home/ubuntu/frontend-app;
    try_files $uri /index.html;
    proxy_pass http://localhost:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }


}

我收到 500 内部服务器错误。

关于如何解决它的任何建议或提示？

【问题讨论】：

开发服务器用于开发。您不需要它来托管应用程序。对于生产有build 命令，然后dist dir 被部署到服务器。如果你还没有，你需要它。
您好，谢谢。所以我的应用程序中不需要 devServer 部分吗？没有它，我的应用程序在192.168.1.7:8080 上运行良好。但是如何将域名添加到我的应用程序中？
我将它部署在 nginx 服务器上。是否可以只在 nginx 的服务器配置上添加我们的域名而不在本地应用程序上添加我们的域名。
是的，没关系，如果您在开发模式下受限于依赖于网站 url 的其他服务，则需要带有您的域的 public。您需要以任何方式将域路由到运行 Vue CLI 的机器，可能是通过 hosts 文件。否则你不需要它。
嗨@Estus Flask，我已经通过添加nginx服务器配置来编辑我的问题。我收到 500 内部服务器错误。我该如何解决这个问题？

标签： javascript vue.js nginx deployment

【解决方案1】：

默认情况下，Vue CLI 假定您的应用程序将部署在域的根目录，例如https://www.my-app.com/。如果您的应用程序部署在子路径中，则需要使用此选项指定该子路径。例如，如果您的应用部署在https://www.foobar.com/my-app/，请将publicPath 设置为'/my-app/'。

此外，您还需要配置 Web 服务器，并尝试在其中部署 Vue 应用程序。

Nginx 配置（最小）

server {    
        listen  80;
        root    /usr/share/nginx/html;
        include /etc/nginx/mime.types;

        location / {
            try_files $uri $uri/ /index.html;
        }
}

参考 - https://cli.vuejs.org/config/#publicpath
部署 - https://cli.vuejs.org/guide/deployment.html

【讨论】：

我正在尝试使用 nginx 服务器部署我的应用程序。是否有必要将我的域名添加到本地运行的应用程序中，或者我必须在服务器配置中提及它。
不一定，默认情况下 nginx 会查看 root - /usr/share/nginx/html; 。您需要将dist 文件夹的内容复制到usr/share/nginx/html
@AfrinGaffar 我已经用 nginx conf 更新了我的答案以寻求您的帮助。
嗨@power-cut，感谢您的回答。如何在服务器上找到根。如果我给 pwd，它会显示 home/ubuntu/frondend-app。
假设你正在运行 ubuntu。您可能想运行一些基本的 linux 命令来探索文件系统。