vue-router的默认根路径是'#',如果不想要'#'就可以使用history模式。
1.在router的配置文件下加入
export default new Router({
mode:'history', //改为history模式
})
2.此时本地可以访问到路径,但是打包过后页面出现空白,在保证静态资源路径加载正确的情况下,原因可能是项目的根路径不是域名,
export default new Router({
mode:'history', //改为history模式
base: '/shexinaghui/', //项目根路径就是线上访问时路由前面的路径
})
此时我们线上访问的路径就是https://域名/shexianghui/index,shexianghui就是项目的根路径
3.使用npm run build打包,生成dist文件夹,我们可以将文件夹的名字改为shexianghui,然后将该文件夹拖到ftp服务器上。
也可以新建名为shexinaghui的文件夹,并将dist中的文件(包括static,favicon.ico和index.html)放到shexianghui文件夹中去.
![](https://img2020.cnblogs.com/blog/1738998/202009/1738998-20200922143214552-1297753708.png)
![](https://img2020.cnblogs.com/blog/1738998/202009/1738998-20200922143044469-1228968868.png)
4.此时访问https://域名/shexianghui即可线上访问该项目,但是刷新网站会出现404,在apache服务器上的解决办法如下:
在项目的根目录,也就是shexianghui文件夹下创建一个文件,名为.htaccess,文件中的内容是
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /shexianghui/
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /shexianghui/index.html [L]
</IfModule>
最后再重新上传该文件夹到ftp即可。
如果以上都完成了,带路由刷新浏览器https://quxun.co/taoteng/index出现白屏,控制台报以下错误
Uncaught SyntaxError: Unexpected token <,
检查.htaccess文件RewriteBase和RewriteRule是否书写正确。