Vuejs和vue-router是前端开发中的重要框架，用于构建用户界面和管理路由。Vuejs提供了一个轻量级、高性能的视图层，而vue-router则为单页应用（SPA）提供了强大的路由管理功能。在使用vue-router时，可以选择两种模式：hash模式和history模式。在history模式下，URL看起来更加整洁，没有#符号，但需要后端配合处理路由。
当使用history模式时，打包Vue应用变得尤为重要。在项目基于vue-cli构建时，配置文件`/config/index.js`中的`build.assetsPublicPath`默认设置为'/'，这可能导致在部署到服务器时出现问题。许多教程建议将其更改为'./'，以使静态资源在本地运行时正常加载。然而，这种修改可能会导致在history模式下刷新二级路径时，页面无法正常显示，因为资源请求被错误地定向到了根目录。
解决这个问题的关键在于正确配置Nginx。Nginx是一个高性能的HTTP和反向代理服务器，常用于部署Web应用。在Nginx配置文件中，我们需要创建一个新的虚拟主机（如`vueSite.conf`），并设置监听的端口（例如3000）。`root`指令应指向Vue应用打包后的dist目录，这样Nginx可以找到静态文件。
关键配置部分是`location /`块，这里使用`try_files`指令处理路由重定向。当用户访问任何路径时，Nginx首先尝试找到该路径对应的静态文件，如果找不到，则尝试路径加斜杠（$uri/），最后如果仍然找不到，就返回`/index.html`。这样，当刷新二级路径时，Nginx会返回首页，由Vue应用处理路由。
正确的Nginx配置示例：
```nginx
server {
listen 3000;
root /path/to/dist;
location / {
try_files $uri $uri/ /index.html;
}
}
```
配置完成后，使用`nginx -t`检查配置文件的正确性，无误后通过`nginx -s reload`重启Nginx服务。现在，访问服务器地址（如`cloudserverhost:3000`）和二级路径，应该能正常展示页面，且刷新不会导致404错误。
总结来说，Vuejs+vue-router的打包过程需要注意history模式下的路由问题，不应盲目修改`assetsPublicPath`。正确配置Nginx，尤其是`try_files`指令，是解决这个问题的关键。通过这种方式，我们可以实现Vue应用的顺利部署，并提供良好的用户体验。记住，对于任何技术问题，深入理解其原理并结合实践是避免踩坑的最佳途径。
