VUE项目的URL一般都会带有一个#,开启历史模式history mode后就可以去掉。但是这样会有一个问题,当我们部署后,访问一个非主页的路径,比如www.xxxxx.com/login ,会报出404错误。
这是因为VUE中的URL都是虚假的,实际是不存在的,自然会报404,所以我们需要调整下该项目文件夹下的URL重写rewrite

下面以Apache为例(因为我没用过Nginx)

确定开启了mod_rewrite模式

开启方式不详述了,Centos7的模块配置默认在/etc/httpd/conf.modules.d

开启网站文件夹的AllowOverride

找到对应网站的配置VirtualHost,添加

<Directory /var/www/xxxxx>
	Options FollowSymLinks
	AllowOverride All
</Directory>

/var/www/xxxxx是你的网站目录,因为一台服务器可能会布置多个网站,所以不建议全局开启AllowOverride,按需配置就行。
最终结果如下

<VirtualHost *:80>
DocumentRoot /var/www/xxxxx
ServerName www.xxxxx.com
	<Directory /var/www/xxxxx>
		Options FollowSymLinks
		AllowOverride All
	</Directory>
...
</VirtualHost>

重启Apache,没有报错就配置成功了。

编写.htaccess文件

编写URL重写规则

<Ifmodule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

编写完成后将其放在网站根目录下。注意是最后打包生成的根目录下,vue生成在dist文件夹下。

处理404页面

VUE的路由是按照路由配置顺次匹配的,在路由配置的最后加上如下代码处理不存在的页面,并返回自己写的404页面

{
	path: '*',
	name: '404',
	component: resolve => require(['@/page/404.vue'], resolve)
}

到这里就配置OK了,访问一下试试吧