在80端口的VPS中运行vue

Question

我在运行 vue 应用程序时遇到一些问题。我无法显示 hello world 组件。 Vue 的index.html 就在那里。但是 hello world 组件没有进入 app.js

已更新

到目前为止，我按照以下步骤操作，我在此路径上创建了一个项目：

/var/www/myapp

然后我打开

port:80

并为此设置虚拟

<VirtualHost *:80>
    DocumentRoot /var/www/myapp
    <Directory /var/www/myapp>
        AllowOverride All
    </Directory>
</VirtualHost>

我进入项目文件夹并执行了

npm run serve

和

npm run build

。 vue 开始在本地主机上运行，如下所示。

 App running at:
  - Local:   http://localhost:8080/ 
  - Network: unavailable 

然后在 package.json 中我在“serve”中添加了主机和端口：

"serve": "vue-cli-service serve --host my-ip --port 80",

但是当我运行

npm run serve

命令时。 Vue运行项目81端口？如果我更改端口 81，然后 vue 开始运行端口 82，就像 vue 逃跑了:)

所以我还创建了

vue.config.js

文件。

module.exports = {
    devServer: {
        open: process.platform === 'myapp',
        host: 'my-ip',
        port: 80, 
        https: true,
        hotOnly: false,
    },
}

但我也没有锻炼。我在屏幕上只看到空白页。当我使用

npm run serve

或

npm run build

时，它开始运行项目

port 81

或其他...

Answer 1

要将使用 Vue CLI v3 构建的 Vue 应用程序部署到 Apache 服务器，请按照以下步骤操作...

1. 构建您的生产应用程序。

   npm run build
   

   通常，这是在您的开发环境中本地完成的。

2. 将

   dist

   文件夹的内容复制到您的 Apache/虚拟主机文档根目录。

   就您而言，这似乎是

   /var/www/myapp

   。既然您提到了 VPS，您将需要使用某种文件传输工具，例如

   rsync

   （CLI），或者如果您使用的是 Windows 并且更喜欢 GUI，我推荐 WinSCP。

   rsync -hrvz --delete dist/ [email protected]:/var/www/myapp/
   

---

如果您将 Vue Router 与 HTML5 历史模式一起使用，您还需要通过将其添加到您的

<VirtualHost>

配置或文档根目录中的

.htaccess

文件来启用 URL 重写。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

_{来自 https://router.vuejs.org/guide/essentials/history-mode.html#apache}

---

更新

如果您打算在生产系统中托管源文件并在那里构建应用程序，简单的解决方案是将虚拟主机

DocumentRoot

指向

dist

文件夹，例如

<VirtualHost *:80>
    DocumentRoot /var/www/myapp/dist
    <Directory /var/www/myapp/dist>
        AllowOverride All
    </Directory>
</VirtualHost>

Answer 2

另一个答案很棒，但这更容易......

将您的域名指向 dist 文件夹:)

例如在 cPanel 中，您可以转到“域”，然后编辑域。更改文档根目录以使其位于末尾：

/dist/