Vuejs+vue-router打包+Nginx配置的实例

其实这个网上已经有了很多人写了，为什么我还要再写这一篇博客？因为我亲身把他们生产的坑给踩了个通透（摊手。正文开始本次的项目是基于vue-cli生成的项目，采用的vue-router的history模式。到这里相信大部人还是类似了，接下来就是一个坑死人不偿命的网上诸多博客都在采用的巨坑。在进行打包的时候，很多博客里都写了，将/config/index.js下，build中的assetsPublicPath从/改为./。我很后悔，为什么当初这样照做的时候不去思考为什么，为什么要这样做，凭什么？如果这个有问题为什么webpack生成的时候不改反而一直放在那里？是谁傻？问题先放在这里，我们先按照Vue.js是一个流行的前端框架，用于构建用户界面。Vue Router是Vue.js的官方路由库，它使得单页应用（SPA）的导航变得简单。在本文中，我们将探讨如何结合Vue.js和Vue Router进行项目打包，并配置Nginx服务器以确保应用的正常运行。在基于Vue CLI创建的项目中，Vue Router可以使用两种模式：hash模式和history模式。hash模式利用URL的`#`符号来跟踪路由变化，而history模式则利用HTML5的History API实现平滑的路由切换，使URL更加友好。然而，history模式在部署时会遇到一些问题，尤其是当应用不在服务器根目录下时。许多在线教程建议在`/config/index.js`文件中，将`build.assetsPublicPath`从`/`改为`./`。这一步的目的是为了让静态资源文件的引用相对于当前目录，而不是项目根目录。然而，这样做可能会导致问题，特别是当用户尝试在应用的子路径下刷新页面时。在Nginx配置中，我们需要确保所有未找到的资源请求都被重定向到`index.html`，以便Vue Router能够处理这些路由。以下是一个基本的Nginx配置示例： ```nginx server { listen 3000; #将/path/to/dist替换为实际的dist文件夹路径root /path/to/dist; location / { try_files $uri/ /index.html; } } ```这个配置告诉Nginx，如果请求的资源不存在，就返回`index.html`文件。对于history模式的Vue Router，这是必需的，因为当用户在子路径下刷新页面时，浏览器会尝试直接加载该路径对应的资源，而这些资源实际上并不存在。`try_files`指令解决了这个问题。运行`npm run build`打包项目后，将生成的`dist`目录上传到服务器。通过Nginx配置，我们可以将应用部署在任意端口（如3000端口），然后在浏览器中输入`cloudserverhost:3000`访问应用。但是，如果你遵循某些教程将`assetsPublicPath`改为`./`，在子路径下刷新页面时，浏览器会尝试从错误的路径加载资源，导致404错误。这是因为`./`是相对路径，它会导致浏览器在子路径下寻找资源，而不是从项目根路径。因此，对于生产环境，建议保留默认的`/`设置，让资源请求始终指向项目根目录。总结来说，Vue.js + Vue Router的打包过程需要注意history模式的特殊部署需求。在Nginx配置中正确处理路由重定向，而非简单地更改`assetsPublicPath`，是确保应用正常运行的关键。正确的Nginx配置加上Vue Router的history模式，可以实现优雅的前端路由管理，提供出色的用户体验。