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

系列文章

• [juejin.im/post/5c0e45…]vue-admin 详细注释，必须手把手作项目系列之（一）

• [juejin.im/post/5c1609… 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的数据结构与算法中经典的详解