개시하다

vue.기본적으로 js의 항목은 URL에 산열 (예: http://localhost/#/abc 을 추가하고 서버에 직접 지정한 URL (예: http://localhost/abc 을 공개합니다.
catch-all이 후진하지 않은 상태에서 서버에 공개하면 404가 되는 것도 회피 전략이다.

배경.

vue router의 공식 페이지Native Node.js에 조작법이 적혀 있는데 이렇게 하면 움직이지 않습니다Node.js (Express). 그런데 방법에 대한 설명이 너무 간단해서 바로 만들어져서 이 기사에 남기고 싶어요.
→ vue.github누르는 중로 이동

방법

vue.자체 프로젝트 작성

npm라면
terminal

$ npm run build

뭐 그런 거.폴더 vue를 만듭니다.나는 js 프로젝트가 전개될 것이라고 생각한다.

node.프로젝트 만들기

적당한 폴더를 만들고 거기서 npm 프로젝트를 만듭니다.
terminal

$ mkdir express_project
$ npm init

많은 질문을 받았으니 적당히 대답하겠습니다.
그리고 나서
방금 구축된 vue.이 express js의 dist 폴더프로젝트에 복사합니다.

Express 설치 등

웹 서버용 Express, catch-all Fortback (index.) 을 설치하는 connect-history-api-fallback
terminal

$ npm i express connect-history-api-fallback -s

　node.js 코드 쓰기

catch-all Foll back과 동시에 3000포트 Listen dist 폴더에 필요한 코드를 최소한으로 작성합니다.
terminal

$ vim express_project/app.js

app.js

const express = require('express')
const history = require('connect-history-api-fallback')
const app = express()
const server = app
    .use(history())
    .use(express.static('dist'))
    .listen(3000, () => {
        console.log('Node.js is listening to PORT:' + server.address().port)
    })

이때express프로젝트 폴더 안에 다음과 같은 느낌이 있다고 생각합니다.

express_project
├── dist
│   ├── index.html
│   └── static
├── app.js
├── node_modules
├── package-lock.json
└── package.json

실행

terminal

$ node app.js

이렇게 되면
http://localhost:3000/abc
의도가 드러날 것 같아서요.

참고 자료

https://router.vuejs.org/ja/guide/essentials/history-mode.html

https://github.com/bripkens/connect-history-api-fallback

http://expressjs.com/ja/starter/static-files.html

https://qiita.com/uwettie/items/3766c7b3fb106e36f5df

아주 가깝게 쓰여졌으니 표기법을 참고하게 해주세요