VUE:vue-cli 에서 경로 의 우물 번 호 를 제거 합 니 다\#조작

vue-cli 프로젝트 에서 url 주소 표시 줄 의'\#'을 제거 하려 면 경로 의 history 모드 를 사용 할 수 있 습 니 다.이 모드 는 history.pushstate API 를 충분히 이용 하여 페이지 를 다시 불 러 오지 않 고 URL 전환 을 완성 할 수 있 습 니 다.
루트 테이블 에 코드 를 한 줄 만 넣 으 면 됩 니 다.


추가 지식:vue 패키지 제거\#주의사항
예 를 들 어 vue cli 2.0 비계 로 생 성 된 항목
1.vue 프로젝트 에서 config 파일 아래 index.js 에서 패키지 설정:

build: {
 // Template for index.html
 index: path.resolve(__dirname, '../dist/index.html'),
 
 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/dist/', //               ！
 
 /**
  * Source Maps
  */
 
 productionSourceMap: true,
 // https://webpack.js.org/configuration/devtool/#production
 devtool: '#source-map',
 
 // Gzip off by default as many popular static hosts such as
 // Surge or Netlify already gzip all static assets for you.
 // Before setting to `true`, make sure to:
 // npm install --save-dev compression-webpack-plugin
 productionGzip: false,
 productionGzipExtensions: ['js', 'css'],
 
 // Run the build command with an extra argument to
 // View the bundle analyzer report after build finishes:
 // `npm run build --report`
 // Set to `true` or `false` to always turn it on or off
 bundleAnalyzerReport: process.env.npm_config_report
}

2.경로 설정:router 폴 더 아래 index.js:

export default new Router({
 mode: 'history', //   #，        history
 base: '/dist/', //         ，           
 scrollBehavior: () => ({ y: 0 }),
 routes: [
  {
   path: '/facebook',
   name: 'Facebook',
   component: Facebook
  },
  {
   path: '/google',
   name: 'Google',
   component: Google
  }
 ]
})

3.나머지 모 르 는 것 은 운영 이나 백 엔 드 개발 파트너 를 찾 아야 합 니 다.nginx 설정:

server {
    listen 8080;
    server_name localhost;
    #charset koi8-r;
    #access_log logs/host.access.log main;
    #        ，              
    root /Users/qiilee/Desktop/vue/dist;
    index index.html;
 
    location /dist {
        #          ，           ：http://localhost:8080/dist ,nginx   /Users/qiilee/Desktop/vue/dist/      
        root /Users/qiilee/Desktop/vue;
        try_files $uri $uri/ @router;
        index index.html;
    }
    //try_files $uri $uri/ @router;        ，                 js  ，         
    location @router {
        rewrite ^.*$ /index.html last;
    }
  }

이 VUE:vue-cli 에서 경로 의 우물 번 호 를 제거 합 니 다.