> vue-router路由模式为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](https://www.iis.net/downloads/microsoft/url-rewrite)工具。*安装完成后，重新打开IIS*，防止没有"URL重写"选项 1. 在你的网站根目录中创建一个 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哈哈~ [参考博客 - 王云飞的简书](https://www.jianshu.com/p/9705040243f2)