详解Vue项目部署遇到的问题及解决方案

1. 打包后的静态资源路径需要修改

找到 build/config/index.js，代码如下：

...
build: {
...
- assetsPublicPath
  // 访问路径，修改成绝对路径
+ assetsPublicPath: '/h5-year-bill/'
}

2. 路由文件

Vue-Router 有一个 base 属性, 传送门

base
类型: string
默认值: “/”
应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 “/app/”

因此，找到 src/router/index.js，代码如下：

// 不影响本地开发，兼容性做了处理
const isHistoryMode = process.env.NODE_ENV === 'production' ? {
 mode: 'history',
 base: '/h5-year-bill/'
} : {
 mode: 'hash'
};
const router = new Router({
 ...isHistoryMode,
 routes
});

至此，打包配置的相关修改已全部完成，项目也能够正常访问。

但还是会有一个问题，跳转到某个路由后，刷新页面，就会出现页面空白，或者路由不通，此时就要修改 nginx 的配置了。

3. nginx 配置相关修改

nginx部署路径/conf/nginx.conf，修改如下：

#h5-year-bill
location ^~ /h5-year-bill {
 root /home/web;
 index index.html;
 try_files $uri $uri/ /h5-year-bill/index.html last;
}

/h5-year-bill/ 就是部署的网站目录。

这样几项配置后，就可以在子目录下访问网站，刷新也没有问题。