vue.js – Was das Vue-cli-Projekt betrifft, wird nach der Bereitstellung der Anforderungsseite app.js mit Nginx im VPS ein 404-Fehler angezeigt.

Question

Ich möchte meinen Lebenslauf auf meiner persönlichen Blog-Website veröffentlichen.
Ich möchte einen /me-Unterpfad zum Domänennamen des Servers hinzufügen, um auf meinen Lebenslauf zuzugreifen.
Natürlich ist mein Lebenslauf in Vue geschrieben und mit vue-cli erstellt
Nach der Bereitstellung auf dem Server führt npm dev aus und läuft erfolgreich auf dem Server-Port

Aber die Browseranfrage erscheint so

Es gibt überhaupt keine app.js-Datei

Aber wenn Sie dieses Vue-Cli-Projekt lokal ausführen

Hier gibt es app.js, also gibt es kein Problem

Ich habe das Nginx-Problem jetzt beseitigt. Jetzt ist es an der Zeit, vue-cli zu erstellen und bereitzustellen. Warum passiert das?

Unterscheidet sich der beim Betrieb des Servers verwendete Code vom lokalen Betrieb?

Die allgemeine Bereitstellung erfolgt statisch mithilfe von Dist-Dateien. Ist es für vue-cli nicht möglich, einen Nginx-Reverse-Proxy auf dem Server bereitzustellen?

Answer 1

其实这个问题我自己解决了。在nginx上不要将项目部署在非根目录上，路径很容易会错的。如果一个服务器有多个项目，那么可以在nginx上面配置不同端口的server 或者直接弄二级域名来指向nginx。

Answer 2

1、项目中找到config\index.js；
2、将build中的assetsPublicPath:'/'改为assetsPublicPath:''；
3、重新执行打包:npm run build；
4、发布，再试试。

Answer 3

对于用vue-cli构建的项目，采用npm run dev 启动服务适用于开发模式，相当于启动了一个server。
线上部署很少采用这种形式，线上部署都会提前npm run build，将代码打包到dist目录中，而dist目录其实是可运行的index.html+静态文件。我们部署的时候只需要将dist目录扔到服务器即可，而不是启动一个server。
nginx配置也比较简单：

server{
    listen 80;
    server_name domain.com;
    location /vue {
        alias /var/www/dist; #dist目录在服务器的位置
    }
}

这样当访问 https://域名/vue 的时候，就会定位到dist目录，而dist目录就是我们项目build之后可运行的静态文件。