A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

一、vue项目携带一个#会对开发造成一定的影响:

1、微信三方登录回调地址,有#号时,接收不到code参数

2、微信H5支付的回调地址,不允许有#

3、App分享,处理特殊字符时,可能会对#进行编译

4、有点影响美观

现在网站大多有三方登录,支付等功能,存在#,项目开发就存在很大的障碍。话不多说,开始去掉#吧。

二、去#的原理

vue把#当做自己的根目录,静态资源,比如图片。

去掉#后,要采用相对路径去引用,如果图片引用是在js内,则要采用require()方法进行引用。

去#后台渲染,请参考vue官方文档 https://router.vuejs.org/zh/guide/essentials/history-mode.html

三、去掉#方法

1、首先判断产线项目是否放在域名根目录下

在router/index.js文件中,添加history模式

如果项目不在根目录下,比如产线项目根目录为 http://share.zrpic.com/jnwtv-live-cartoon-h5/



  • export default new Router({



  •   mode: 'history',



  •   base: '/jnwtv-live-cartoon-h5/', //如果项目根目录不为域名,则添加该行



  •   routes: [{}]



  • })


2、修改config/index.js文件



  • build: {



  •     // Paths



  •     assetsRoot: path.resolve(__dirname, '../dist'),



  •     assetsSubDirectory: 'static',



  •     assetsPublicPath: '/jnwtv-live-cartoon-h5/', //添加根目录,如果域名为根目录,则为 '/'



  • }


3、去掉#,对项目的根目录造成影响,这是不可避免的,再次强调,确保静态资源文件路径正确。

四、后台Apache修改案例

作为前端程序员,前端html页面渲染,用Apache是再合适不过了。

1、修改Apache配置文件httpd.conf



  • LoadModule rewrite_module libexec/apache2/mod_rewrite.so,去掉前面的#







  • AllowOverride None,改成AllowOverride All


2、Apache的www/jnwtv-live-cartoon-h5/目录下新建 .htaccess文件, 修改RewriteRule为 /jnwtv-live-cartoon-h5/index.html

如下:(注意:点和反斜杠中间有一个空格,该文件和打包的index.html同级)



  • <IfModule mod_rewrite.c>



  •   RewriteEngine On



  •   RewriteBase /



  •   RewriteRule ^index\.html$ - [L]



  •   RewriteCond %{REQUEST_FILENAME} !-f



  •   RewriteCond %{REQUEST_FILENAME} !-d



  •   RewriteRule . /jnwtv-live-cartoon-h5/index.html [L]



  • </IfModule>





【转载】        https://blog.csdn.net/bocongbo/article/details/81670072


2 个回复

倒序浏览
奈斯
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马