vue.js - Vue-cli 프로젝트와 관련하여 VPS에서 Nginx와 함께 요청 페이지 app.js를 배포한 후 404 오류 메시지가 표시됩니다.

Question

개인 블로그 웹사이트에 이력서를 게재하고 싶습니다.
내 이력서에 액세스하기 위해 서버의 도메인 이름에 /me 하위 경로를 추가하고 싶습니다.
물론 내 이력서는 Vue로 작성되고 vue-cli로 작성되었습니다
서버에 배포한 후 npm run dev를 실행하고 서버 포트에서 성공적으로 실행합니다

그런데 브라우저 요청이 이렇게 뜹니다

app.js 파일이 전혀 없습니다

하지만 이 vue-cli 프로젝트를 로컬에서 실행한다면

여기에 app.js가 있으니 문제 없습니다

이제 nginx 문제를 제거했습니다. 이제 vue-cli를 구축하고 배포할 차례입니다. 왜 이런 일이 발생할까요

서버를 실행할 때 사용하는 코드와 로컬에서 실행할 때 사용하는 코드는 다른가요?

일반 배포는 dist 파일을 사용하여 정적으로 배포됩니다. vue-cli가 nginx 리버스 프록시를 서버에 배포하는 것이 불가능합니까?

Answer 1

사실 이 문제는 제가 직접 해결했어요. 경로가 쉽게 잘못될 수 있으므로 nginx의 루트가 아닌 디렉터리에 프로젝트를 배포하지 마세요. 서버에 여러 프로젝트가 있는 경우 nginx에서 서로 다른 포트로 서버를 구성하거나 nginx를 가리키는 두 번째 수준 도메인 이름을 직접 만들 수 있습니다.

Answer 2

1. 프로젝트에서 configindex.js；
2、将build中的assetsPublicPath:'/'改为assetsPublicPath:''；
3、重新执行打包:npm run build을 찾아 게시하고 다시 시도하세요.

Answer 3

vue-cli로 구축된 프로젝트의 경우 npm run dev를 사용하여 서비스를 시작하는 것은 서버 시작과 동일한 개발 모드에 적합합니다.
온라인 배포에서는 이 형식을 거의 채택하지 않습니다. 온라인 배포는 미리 npm run build하고 코드를 dist 디렉터리에 패키징하며 dist 디렉터리는 실제로 Running index일 수 있습니다. .html + 정적 파일. 배포할 때 서버를 시작하는 대신 dist 디렉터리를 서버에 던지기만 하면 됩니다.
nginx 구성도 비교적 간단합니다: 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 으아아아

이렇게 하면 https://domain name/vue에 접속하면 dist 디렉터리가 위치하게 되는데, dist 디렉터리는 우리 프로젝트가 빌드된 후 실행할 수 있는 정적 파일입니다. 🎜