黑马程序员技术交流社区

标题: 【上海校区】vue去掉#，history模式 [打印本页]

---

作者: 不二晨    时间: 2018-8-15 09:54
标题: 【上海校区】vue去掉#，history模式

一、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

---

作者: 不二晨    时间: 2018-8-16 17:14
奈斯

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2