Vue：使用History模式打包时注意事项

Vue: 使用History模式打包时需要注意的事项

1. 前言

• 今天在使用history模式打包vue项目，后台部署时遇到了种种问题，特地写一篇博客记录一下。

2. 路由配置

• 在History模式下，在路由配置文件中首先要将mode改为history;

• 部署项目时，如果在域名后还有额外路径的话，需要注意添加base，作为每次跳转路由时的前缀；

• 以下是设置样例：

  // router/index.js
  export default new Router({
        
        
      mode : "history",
      base : "/test/dist",			// 项目存放在http://www.xxx.com/test/dist/
      routes : [...]
  })
  

• 添加了base后，路由跳转时会默认在路径前添加上base的内容，解决了因为路径问题而出现404错误了；

3. 生产环境配置

• 这一步十分重要！！！

• 生产环境主要配置的是静态资源的路径，配置文件在/config/index.js：

  build: {
        
        
      index: path.resolve(__dirname, '../dist/index.html'),
      assetsRoot: path.resolve(__dirname, '../dist'),
      assetsSubDirectory: 'static',
      assetsPublicPath: '/',	// 就是这里，为打包后静态资源请求的路径
      ...
  }
  

• 今天在部署项目时，由于默认的静态路径是从根目录/下请求的，导致每次请求资源都会向http://www.xxx.com/static/...请求，结果就是404 Not Found。

• 如果你的项目是部署在http://www.xxx.com/test/dist/下的话，可以像下面这样更改：

  build: {
        
        
      index: path.resolve(__dirname, '../dist/index.html'),
      assetsRoot: path.resolve(__dirname, '../dist'),
      assetsSubDirectory: 'static',
      assetsPublicPath: '/test/dist/',	// 更改为和base一样的路径
      ...
  }
  

• 这样，浏览器请求静态资源就会向http://www.xxx.com/test/dist/static/...请求了，解决了静态资源找不到的问题；

3. 后台Nginx配置

• 按上面修改了配置后，我尝试将项目部署到nginx上，发现在路由跳转时，还是发生了404错误，在查阅了官方文档后，找到了答案；

• 由于Vue项目是SPA应用（即单页面应用），nginx在跳转时会优先根据你请求的路径去寻找该路径下的index.html页面，而vue应用只有一个index.html文件放在项目根目录，因此需要对nginx的配置文件加上一句：

  location /test/dist {
      ...
      try_files $uri $uri/ /test/dist/index.html;
      ...
  }
  

• 这里的$uri 是指dist/以后的路径文件；

• 这里的$uri/ 是指dist/以后的路径；

• 这句话的意思是，当路径变化后，nginx会优先去寻找地址栏上最后一个uri的index.html文件，如果找不到，就会返回指定的html文件（这里就是返回/test/dist/index.html）。

4. 错误页面的配置

• 由于nginx配置，一旦404错误就会返回项目根目录的index文件，那么如果真的找不到页面，该如何显示404呢？

• 在网上苦苦搜寻后，找到了一个方法：自己在vue页面写一个404页面，然后再路由配置文件中添加匹配规则：

  // router/index.js
  import ErrorPage from "@/views/ErrorPage/ErrorPage"
  export default new Router({
        
        
      mode : "history",
      base : "/test/dist",			// 项目存放在http://www.xxx.com/test/dist/
      routes : [
      	...
          {
        
        
              path : '*',			// 这里指当之前的路径匹配不到时，就会渲染对应组件
              components : ErrorPage,
              name : "ErrorPage"
          }
      ]
  })
  

• 配置好Vue项目后，nginx也需要配置以下语句：

  location /test/dist {
      ...
      try_files $uri $uri/ /test/dist/index.html;
      error_page 404 /text/dist/index.html;		
      ...
  }
  

5. 后言

• 此次配置项目的过程中遇到了不少坑，到最后还是基础学得不扎实，建议有遇到同样错误的朋友将Vue.cli官方文档多看几遍，加深印象！