Vue+history路由+路径前缀需要配置的内容汇总

Vue+history路由+路径前缀需要配置的内容汇总

nginx配置文件

location /baseUrl {
			# 如果用alias，则路径结构要求是，必须存在/erp/xxx/server/index.html
            alias   /erp/xxx/server;
            # 如果用root，则路径结构要求是，必须存在/erp/xxx/server/baseUrl/index.html
            #  root   /erp/xxx/server;
	        try_files $uri $uri/ /baseUrl/index.html =404;
	        # 如果用alias，try_files后面的/index.html =404前一定要有/baseUrl，否则进入子路由后刷新404
	        # 如果用root，try_files $uri $uri/ /index.html =404;
            index  index.html index.htm;
}

vue.config.js修改

在module.exports内加入

publicPath: "/baseUrl/"

需要注意的是，前面的/和后面的/不加都会产生影响。如果少了后面的/，会出现http://host/baseUrl 能进去，但是http://host/baseUrl/router 这样后面加路由就跳转到Wellcome to nginx页面的情况。此外，如果出现html能获取到，但静态资源全都是404的情况，一般也是publicPath没有配置正确

vueRouter

导出router时，需要加上base: “/baseUrl”

export default new Router({
  base: "/baseUrl",
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

如果页面能打开，静态资源也都能获取到，但是一片空白，一般就是路由没有匹配上，需要在vueRouter里加base