vue-admin 详细注释，必须手把手做项目系列之（三）丢到服务器中解决报错

系列文章

[juejin.cn/post/684490…]vue-admin 详细注释，必须手把手做项目系列之（一）
[juejin.cn/post/684490… vue-admin 详细注释，必须手把手做项目系列之（二）
麻雀虽小五脏俱全：[项目地址 github.com/whylisa/vue…)

前言

系列三将会把我们写好的项目放到服务器中，模拟和后台对接的场景
我们将会放到phpstudy中，简单易懂。下载链接：[phpstudy.php.cn/]
系列三中我们会来看看放到服务器中，会有哪些问题，然后解决它。

phpstudy的使用

下载解压之后，我们要找到www目录，把我们打包的vue文件放入www目录下
然后我们启动phpstudy,你会看到如下界面

启动成功的界面

各种报错

然后我们在浏览器中输入localhost/dist之后会报错，路径错误，找不到css/js文件
是因为我们在用webpack打包时在，config/index.js文件中，配置的assetsPublicPath: '/',这是默认配置，
我们只需要修改成assetsPublicPath: './',就可以了
修改之后，我们重新输入localhost/dist，就可以正常访问了
然后我们点击登录，发现没有反应，控制台报错，报错如下：
从报错信息看，我们没有起接口服务，然后我们起接口服务： [图片]
上图的报错信息图片报404是楼主的项目login页面的一张图片，在这里做演示。我们可以在控制台中看到，图片路径，和接口都不对。
- 图片的错误是phpstudy在访问地址时，默认的访问localhost/static/-----而我们static是dist 目录下的，所以要加dist。
- 楼主这里修改的就比较简单粗暴了，我们在“图片一中”直接在phpstudy中的“其他选项菜单”中，选择“phpStudy设置”中的“端口常规设置”中的“网站目录”中加了一个 dist,这样就解决这个问题了，（ps:这里只做模拟演示，碰到这种情况我们就会去针对处理，而不是摸不着头脑）
- 我们在“图片二”中，不使用本地代理，因为官方文档中proxyTable{},只在开发环境中可以用，这时候我们直接换成我们全部的接口地址，这样解决了这个问题，就可以正常登陆了。同时，我们在main.js中可以配置axios的拦截器，简化我们写这么长的url地址。（详情见系列一，二）这里“贴一段代码示例”
图片一：
图片二：
贴一段代码示例


// 把axios对象绑定到Vue原型中
Vue.prototype.axios = axios

// 给axios配置拦截器

// 添加请求拦截器,拦截器的作用：
// 在拦截器中可以获取到axios的配置，在config中修改东西
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // console.log('哈哈，我拦截到了请求', config)
  // 只需要给config配置baseURL 以及 headers
  config.baseURL = 'http://localhost:8888/'
  config.headers.Authorization = localStorage.getItem('myToken')
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})
// 配置axios的通过配置
// axios.defaults.baseURL = 'http://localhost:3000/login'
// axios.defaults.headers.common['Authorization'] = localStorage.getItem('myToken')

这样我们就可以愉快地简化我们，请求的url地址了，如下：

          // 发送axios请求
          const res = await this.axios({
            method: 'post',
            url: 'login',//直接写login而不用写http://localhost:8888/login了，因为我们配置了baseURL
            data: this.form
          })

结语

楼主本来想用php写接口，奈何时间有点忙，只能等后续了。。。。
这个模板项目的页面不是很多，我们把基础架构搞懂之后，其实后面就是板砖了，无论是响应式，还是加上一些特效，或使用h5,c3等等，这个就看项目需求了，你会了1，后面的0你就有谱了，那得你自己加油了。
同时，项目优化中，我们可以做一些axios封装，组件的各种抽离等等的优化，这些自己百度下子，因为别人写的很不错。多查查，多看看，总会有收获，学习莫慌，多读书，
后续楼主，会写react,小程序，一些js的数据结构与算法中经典的详解