Netlify에서 호스팅되는 Vue SPA의 루트 경로에 _redirects 파일을 추가하십시오.

Question

Vue CLI를 사용하여 단일 페이지 응용 프로그램을 개발 중이며 히스토리 푸시 스테이트가 작동하여 깨끗한 URL을 얻길 원합니다.

나는이를 수행 할 필요가 : https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps 및 내 사이트 폴더의 루트에 _redirects 파일을 추가 다음 문제는 내가이 _redirects 파일을 추가하는 방법을 몰라

/* /index.html 200 

을 내 dist 폴더의 루트. 정적 폴더에 추가하려고했지만 루트가 아니라 하위 폴더로 끝납니다. Netlify에 배포 한 후 기록 모드가 작동하도록이 파일을 포함하려면 어떻게해야합니까?

// config/index.js 
build: { 
    // Paths 
    assetsRoot: path.resolve(__dirname, '../dist'), 
    assetsSubDirectory: 'static', 
    assetsPublicPath: '/', 

Answer 1

Vue.js는 정적 애셋을 복사하는 데 webpack을 사용합니다. 이 경우에는 생산 빌드를 위해 webpack.prod.conf.js으로 유지되며이 경우 Netlify에 필요한 것입니다. 가장 좋고 깨끗한 구성이 있다고 생각합니다. based on this solution.

의 파일을 webpack.prod.conf.js에서 검색하십시오.

// copy custom static assets 
new CopyWebpackPlugin([ 
    { 
    from: path.resolve(__dirname, '../static'), 
    to: config.build.assetsSubDirectory, 
    ignore: ['.*'] 
    } 
]) 

당신은 당신이 좋아하는이 아무것도의 이름을 수 (정적 폴더의 프로젝트 같은 수준의 폴더) 루트 만들기,하지만 난 예를 들어 root을 사용합니다.

그러면 _redirects 파일이 새디렉토리에 있는지 또는 사용자가 무엇을 호출했는지 확인해야합니다. 이 경우에는이처럼 보이게 이제 webpack.prod.conf.js CopyWebpackPlugin 섹션을 수정

root라는 다음

// copy custom static assets 
new CopyWebpackPlugin([ 
    { 
    from: path.resolve(__dirname, '../static'), 
    to: config.build.assetsSubDirectory, 
    ignore: ['.*'] 
    }, 
    { 
    from: path.resolve(__dirname, '../root'), 
    to: config.build.assetsRoot, 
    ignore: ['.*'] 
    } 
])