江苏龙网

  1. 主页 > 生活百科 > >

开箱即用 vue全家桶+vant移动端解决方案( 四 )

vue全家桶+vant

接口管理在src/api 文件夹下统一管理接口

  • 你可以建立多个模块对接接口, 比如 home.js 里是首页的接口这里讲解user.js
  • url 接口地址，请求的时候会拼接上 config 下的 baseApi
  • method 请求方法
  • data 请求参数 qs.stringify(params) 是对数据系列化操作
  • hideloading 默认 false,设置为 true 后，不显示 loading ui 交互中有些接口不需要让用户感知
import qs from 'qs'// axiosimport request from '@/utils/request'//user api// 用户信息export function getUserInfo(params) {  return request({    url: '/user/userinfo',    method: 'get',    data: qs.stringify(params),    hideloading: true // 隐藏 loading 组件  })}如何调用// 请求接口import {getUserInfo} from '@/api/user.js'const params = {user: 'sunnie'}getUserInfo(params)  .then(() => {})  .catch(() => {})? Webpack 4 vue.config.js 基础配置如果你的 Vue Router 模式是 hash
publicPath: './',如果你的 Vue Router 模式是 history 这里的 publicPath 和你的 Vue Routerbase 保持一直
publicPath: '/app/',const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)module.exports = {  publicPath: './', // 署应用包时的基本 URL 。vue-router hash 模式使用  //  publicPath: '/app/', // 署应用包时的基本 URL 。  vue-router history模式使用  outputDir: 'dist', //  生产环境构建文件的目录  assetsDir: 'static', //  outputDir的静态资源(js、css、img、fonts)目录  lintOnSave: false,  productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建 。  devServer: {    port: 9020, // 端口号    open: false, // 启动后打开浏览器    overlay: {      //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层      warnings: false,      errors: true    }    // ...  }}? 配置 proxy 跨域如果你的项目需要跨域设置，你需要打开 vue.config.js proxy 注释 并且配置相应参数
注意：你还需要将 src/config/env.development.js 里的 baseApi 设置成 '/'
module.exports = {  devServer: {    // ....    proxy: {      //配置跨域      '/api': {        target: 'https://test.xxx.com', // 接口的域名        // ws: true, // 是否启用websockets        changOrigin: true, // 开启代理，在本地创建一个虚拟服务端        pathRewrite: {          '^/api': '/'        }      }    }  }}使用 例如: src/api/home.js
export function getUserInfo(params) {  return request({    url: '/api/userinfo',    method: 'get',    data: qs.stringify(params)  })}? 配置 alias 别名const path = require('path')const resolve = dir => path.join(__dirname, dir)const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)module.exports = {  chainWebpack: config => {    // 添加别名    config.resolve.alias      .set('@', resolve('src'))      .set('assets', resolve('src/assets'))      .set('api', resolve('src/api'))      .set('views', resolve('src/views'))      .set('components', resolve('src/components'))  }}


推荐阅读


上一篇：细思极恐的诡异经历 诡异的事情发生了

下一篇：标贝科技入选“2020人工智能语义识别创新排行”