Vue路由模式为history打包导致的问题@小四

Vue-cli路由为history的话 ，在服务器下面会出现一系列不可避免的问题，我会一一带着大家，一步步进行解决...

第一个问题，背景图片路径问题

解决方案也很简单，当然这并非唯一解决的方案

// build/utils.js
if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath:"../../", // 添加上这个路径，当然根据你自己的路径不同而不同，这是默认状态下的路径
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

再次npm run build，试试看

第二个问题，刷新404，为什么，因为本地路径中没有这个真实资源存在，这些访问资源都是在js里渲染的。我们只需要在服务器配置如果URL匹配不到任何静态资源，就跳转到默认的index.html。

• nginx服务器下

server {
        listen       8089; // 端口
        server_name  localhost; // 访问地址，默认是本机
       location / {
            try_files $uri $uri/ @router; // 需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        // 对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }

记住修改配置后一定要重启Nginx服务器，否则无效，Nginx相关命令， 自行百度

这里的配置意思是将所有的文件都指向Index.html文件

---

• IIS服务器下

相信大家都知道在IIS下解决Vue单页面应用404的方法是使用URL Rewrite，把所有的请求都转到/index.html中。

1. 安装：
   如果IIS中有Web平台安装程序那么打开，在里面搜索url重写安装、添加就可以了。没有的话，独立下载URL Rewrite工具。安装完成后，重新打开IIS，防止没有"URL重写"选项
   2、在你的网站根目录中创建一个 web.config.xml 文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

给个警告，因为这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。
接下来是Vue路由中的配置：

import NotFoundComponent from '@/views/no-found'
{     
    path: '*',
    component: NotFoundComponent
 }

至此，IIS下的配置已完成，随便刷新都不会出现404的错误了，O(∩∩)O哈哈~好开心，做饭去了...另外，其它服务器我没有亲测过，如果你们有什么问题的话，可以给我留言，我会帮忙解答，O(∩∩)O哈哈~

同学们听我说.jpg