axios链接带参数_VUE升级（全面解析vuecil3/vuecil4的vue.config.js等常用配置，配置axios）...

阅读量：7028 次

发布时间：2019-06-28

本文共 9986 字，大约阅读时间需要 33 分钟。

一、vuecil2如何升级到vuecil3+

卸载旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.> x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

node配置

Vue CLI3+ 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)

全局安装包

npm install -g @vue/cli# ORyarn global add @vue/cli

安装所需选择配置：可参考官方配置

https://cli.vuejs.org/zh/guide/

二、vuecil3/vuecil4的配置语法

2.1 目录结构

├── README.md            # 说明|-- dist                         # 打包后文件夹├── babel.config.js       # babel语法编译├── package-lock.json ├── public            # 静态文件夹,这类资源将会直接被拷贝，而不会经过 webpack 的处理。│   ├── favicon.ico│   └── index.html        #入口页面└── src                # 源码目录    ├── App.vue - 页面    ├── assets  - 静态目录,这类引用会被 webpack 处理。    │   └── logo.png    ├── components 组件    │   └── HelloWorld.vue    └── main.js                  # 入口文件，加载公共组件│—— vue.config.js                # 配置文件，需自行配置 │—— .gitignore              # git忽略上传的文件格式   │—— babel.config.js         # babel语法编译                        │—— package.json              # 项目基本信息 │—— .env              # 环境变量和模式，需自行配置 │—— .eslintrc.js            # ES-lint校验

2.2 vue.config.js 配置

vuecil3+和vuecil2的最大区别就在于内置了很多配置，没有了build文件夹和config的配置。但是在开发中，避免不了的还是需要个性化的配置这里系统讲一下 vue.config.js的配置；

首先在最外层目录下新建文件vue.config.js

具体配置

// vue.config.jsconst path = require('path');const resolve = (dir) => path.join(__dirname, dir);const port = process.env.port || process.env.npm_config_port || 80 // 端口/** 正式配置项，以下参数 都是可选**/module.exports = {
        publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',  // 打包公共路径    indexPath: 'index.html', // 相对于打包路径index.html的路径    outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录    assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录    lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码，false不需要    runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本    productionSourceMap: false, // 生产环境的 source map,    parallel: require("os").cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。    pwa: {}, // 向 PWA 插件传递选项。    devServer: {
            overlay: { // 让浏览器 overlay 同时显示警告和错误            warnings: true,            errors: true        },        host: '0.0.0.0',        port: port, // 端口号        open: true, //配置后自动启动浏览器        https: false, // https:{type:Boolean}        hotOnly: true, // 热更新        // proxy: 'http://localhost:8080'   // 配置跨域处理,只有一个代理        proxy: { //配置多个跨域            [process.env.VUE_APP_BASE_API]: {
                    target: `http://localhost:8081`,                changeOrigin: true,     //是否跨域                ws: true,       //websocket支持                pathRewrite: {
                        ['^'+process.env.VUE_APP_BASE_API]: ''                }            }        },        disableHostCheck: true    },    //webpack的配置项    configureWebpack: {
            name: "测试",        resolve: {
                alias: {
                    '@': resolve('src')            }        }    },    chainWebpack: config => {
            config.resolve.symlinks(true); // 修复热更新失效        // 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中        config.plugin("html").tap(args => {
                // 修复 Lazy loading routes Error            args[0].chunksSortMode = "none";            return args;        });        config.resolve.alias // 添加别名            .set('@', resolve('src'))            .set('@assets', resolve('src/assets'))            .set('@components', resolve('src/components'))            .set('@views', resolve('src/views'))            .set('@store', resolve('src/store'));    },}

以上配置按需引用，常见的配置项都已经写出，其他特殊可参考vue-cil官网

https://cli.vuejs.org/zh/config/#devserver

2.3 环境变量的配置

vuecil3+关于环境变量的配置方式也发生的改变

在package.json同级新建文件.env

注意事项

环境变量的配置值只能是键值对形式，不需要带双引号；

如果想分开发环境或生产环境类分别配置，则同级新建.env.development或.env.production文件并书写相关键值对，此文件优先级大于.env文件；

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中，变量书写VUE_APP_*才会生效；

.env文件配置及使用

# 开发环境配置ENV = 'development'# 开发环境VUE_APP_BASE_API = '/dev-api'

# 生产环境配置ENV = 'production'# 生产环境VUE_APP_BASE_API = 'http://192.168.1.148:8080'

页面中使用：

console.log(process.env.VUE_APP_BASE_API )//"/dev-api"

三、vuecil3中的启动打包命令

3.1 package.json文件

"scripts": {
        "serve": "vue-cli-service serve", //启动    "build": "vue-cli-service build", //打包    "lint": "vue-cli-service lint" //eslint  },

3.2 命令

//启动项目npm run serve//打包项目npm run build

3.3 更多命令配置

如果不习惯npm run serve，可以配置继续使用npm run dev来启动项目；

"scripts": {
        "dev": "vue-cli-service serve", //启动  },

如果默认localhost访问的同时需要使用本地ip+端口方式访问，则配置：

"scripts": {
        "serve": "vue-cli-service serve --host 0.0.0.0", //启动  },

四、vue.cli项目封装全局axios，封装请求，封装公共的api和调用请求的全过程

一、vue项目的前期配置

新建vue项目，下载axios，并在main.js中导入axios

npm i axios -S

//main.jsimport axios from "axios";

二、配置config文件中的代理地址

vue cil2旧版本的代理配置——config/index.js

dev: {
        // Paths    assetsSubDirectory: 'static',    assetsPublicPath: '/',    // 后端请求地址代理，配置后testIp再之后的页面调用时就直接指代 http://197.82.15.15:8088    proxyTable: {
          '/testIp': {
            target: 'http://197.82.15.15:8088',        changeOrigin: true,        pathRewrite: {           '^/testIp': ''        }      },      '/elseIp': {
            target: 'http://182.83.19.15:8080',        changeOrigin: true,        pathRewrite: {           '^/esleIp': ''        }      },    },    // Various Dev Server settings    host: 'localhost', // can be overwritten by process.env.HOST    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined    autoOpenBrowser: false,    errorOverlay: true,    notifyOnErrors: true,    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-    /**     * Source Maps     */    // https://webpack.js.org/configuration/devtool/#development    devtool: 'cheap-module-eval-source-map',    // If you have problems debugging vue-files in devtools,    // set this to false - it *may* help    // https://vue-loader.vuejs.org/en/options.html#cachebusting    cacheBusting: true,    cssSourceMap: true  },

vuecil 3+ 新版本的代理配置–vue.config.js 文件

devServer: {
            overlay: { // 让浏览器 overlay 同时显示警告和错误            warnings: true,            errors: true        },        host: '0.0.0.0',        port: port, // 端口号        open: true, //配置后自动启动浏览器        https: false, // https:{type:Boolean}        hotOnly: true, // 热更新        // proxy: 'http://localhost:8080'   // 配置跨域处理,只有一个代理        proxy: { //配置多个跨域            [process.env.VUE_APP_BASE_API]: {
                    target: `http://localhost:8081`,                changeOrigin: true,     //是否跨域                ws: true,       //websocket支持                pathRewrite: {
                        ['^'+process.env.VUE_APP_BASE_API]: ''                }            }        },        disableHostCheck: true    },

三、封装axios实例 —— request.js

在项目src目录下新建utils文件夹，然后在其中新建 request.js文件，这个文件是主要书写axios的封装过程。

/****   request.js   ****/// 导入axiosimport axios from 'axios'// 使用element-ui Message做消息提醒import { Message } from 'element-ui';axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'//1. 创建新的axios实例，const service = axios.create({
        // 公共接口--这里注意后面会讲    baseURL: process.env.VUE_APP_BASE_API,    // 超时时间 单位是ms，这里设置了3s的超时时间    timeout: 3 * 1000})// 2.请求拦截器service.interceptors.request.use(config => {
        //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加    // config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换    // config.headers = {
        //     'Content-Type':'application/x-www-form-urlencoded' //配置请求头    // }    //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie    // const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下    // if(token){
        //     config.params = {'token':token} //如果要求携带在参数中    //     config.headers.token= token; //如果要求携带在请求头中    // }    return config}, error => {
        Promise.reject(error)})// 3.响应拦截器service.interceptors.response.use(response => {
        //接收到响应数据并成功后的一些共有的处理，关闭loading等    return response}, error => {
        /***** 接收到异常响应的处理开始 *****/    if (error && error.response) {
            // 1.公共错误处理        // 2.根据响应码具体处理        switch (error.response.status) {
                case 400:                error.message = '错误请求'                break;            case 401:                error.message = '未授权，请重新登录'                break;            case 403:                error.message = '拒绝访问'                break;            case 404:                error.message = '请求错误,未找到该资源'                break;            case 405:                error.message = '请求方法未允许'                break;            case 408:                error.message = '请求超时'                break;            case 500:                error.message = '服务器端出错'                break;            case 501:                error.message = '网络未实现'                break;            case 502:                error.message = '网络错误'                break;            case 503:                error.message = '服务不可用'                break;            case 504:                error.message = '网络超时'                break;            case 505:                error.message = 'http版本不支持该请求'                break;            default:                error.message = `连接错误${error.response.status}`        }    } else {
            // 超时处理        if (JSON.stringify(error).includes('timeout')) {
                Message.error('服务器响应超时，请刷新当前页')        }        error.message('连接服务器失败')    }    Message.error(error.message)    /***** 处理结束 *****/    //如果不需要错误处理，以上的处理过程都可省略    return Promise.resolve(error.response)})//4.导入文件export default service

四、封装请求——http.js

/****   http.js   ****/// 导入封装好的axios实例import request from '@/utils/request'export function listAccidents(query) {
        return request({
            url: '/api/v1/usercenter/userHave/userHaveAppsdemo',        method: 'get',        params: query    })}

五、如何在vue文件中调用

import { listAccidents } from "@/api/http";

created(){
        this.data();  },  methods:{
        data(){
          listAccidents().then(response=>{
            console.log(response)      })    }  }