vue history 模式配置

vue 的路由模式

• hash 模式（地址会有'#'，默认就这样）
• history 模式

• 静态文件方式

# nginx中如果以npm run build后的静态文件运行时需要添加
location / {
  try_files $uri $uri/ /index.html;
}

-dev 模式（独立服务）
第一步：如何切换history模式 在router.js中配置

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  // 切换路由后滚动条置顶
  scrollBehavior() {
    return {
      x: 0,
      y: 0
    }
  }
})

export default router

第二步在vue.config.js中配置

module.exports = {
    publicPath: '/',   //这个必须，引入静态资源需要从根路径引入，否则会找不到静态资源
    devServer: {
        // history模式下的url会请求到服务器端，但是服务器端并没有这一个资源文件，就会返回404，所以需要配置这一项
        historyApiFallback: {
            index: '/index.html' //与output的publicPath
        },
      },
}