iview-admin上线部署踩坑记

发表于 更新于 分类于 ， Changyan： 本文字数： 594 阅读时长 ≈ 2 分钟

iView-admin是iView生态中的成员之一，是一套采用前后端分离开发模式，基于Vue的后台管理系统前端解决方案。该模板界面优美，功能齐全俘获了很多前端的心，然，对于新手来说注定是要踩很多坑。关于文档确实太过简洁，简单叙述了几个功能，并不是从开发到生产的完整说明书，接下来说下本人遇到的坑。

刷新404

修改服务器配置文件

这个是伪静态造成的，常用服务器有两种：Nginx和Apache，Apache常用配置文件为：.htaccess,该文件放在网站根目录即可。Nginx则是对应的vhost.conf文件。

Nginx配置

全部请求转发给index.html去处理

1
2
3
4
location / {
      index  index.html  index.htm;
      try_files $uri $uri/   /index.html;
}

Apache配置

1
2
3
4
5
6
7
8
<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-admin配置

发布到线上二级路由无法正常点击 vue.config.js 根目录设置为自己的域名

1
2
3
4
5
6
7
8
9
10
// 项目部署基础
// 默认情况下，我们假设你的应用将被部署在域的根目录下,
// 例如：https://www.diandian100.cn/
// 默认：'/'
// 如果您的应用程序部署在子路径中，则需要在这指定子路径
// 例如：https://www.diandian100.cn/my-app/
// 需要将它改为'/my-app/'
const BASE_URL = process.env.NODE_ENV === 'production'
  ? 'https://www.diandian100.cn/'
  : '/'

跨域问题

vue.config.js里

1
2
3
devServer: {
  proxy: 'http://xxxxxx/api/'
}

header认证问题

ib/axios.js文件里

1
2
3
4
5
6
7
8
9
10
11
12
13
getInsideConfig () {
    const config = {
      baseURL: this.baseUrl,
      headers: {
      }
    }
    //设置全局headers
    let token = Cookies.get('token')
    if(token != 'undefined'){
      config.headers.AUTHKEY=token
    }
    return config
  }

发送message/count请求

应该极少数人会像我这么迷糊吧，请求页面控制台一直输出一个404的错误，服务器地址/message/count请求404，因为刚好我这个api有一个echart的统计接口，地址也叫count，以为是自己接口地址写错了，怎么都找不到，后来想到扒了下main组件，main组件里包含了头部、和菜单部分，而投不中包含了用户组件，用户下拉有一个未读信息，问题找到了，就是main组件里请求读取了一个未读消息，接口就是这个message/count

修改src/components/main/main.vue，挂载组件是获取了一个请求，把该请求注释掉即可！

1
2
3
4
mounted () {
    // 获取未读消息条数
    // this.getUnreadMessageCount()
  }