一个简单vue.config.js配置和axios简单封装

最新推荐文章于 2024-07-25 22:35:58 发布

小兔&崽子

最新推荐文章于 2024-07-25 22:35:58 发布

阅读量3k

点赞数 1

分类专栏： webpack 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_49238278/article/details/107721674

版权

本文介绍了如何在Vue项目中创建vue.config.js进行自定义配置，包括新建文件及代码示例。同时，详细讲解了如何对axios进行简单封装，创建utils文件夹，建立ajax.js和crossDomain.js文件，并提供了相关代码片段。最后展示了如何在项目中引入并使用这些封装好的接口。

摘要由CSDN通过智能技术生成

一个简单vue.config.js配置和axios封装

从vue-cli3.0脚手架开始，搭建的Vue项目，目录中是不存在vue.config.js文件的。所以当我们想要做一些自己的配置的时候要自己手动建一个vue.config.js文件。

1、vue.config.js配置

新建vue.config.js
在这里插入图片描述

vue.config.js代码

module.exports = {
   
  publicPath:  process.env.NODE_ENV === 'production' ? '/kuaChengTongBan/' : '/',
  outputDir: 'kuaChengTongBan', // 更改打包路径，项目默认的路径是dist  
  // 请求代理 
  devServer: {
   
      proxy: {
      
        //广州市海珠区
      '/ApprItemInterface': {
   //'/ApprItemInterface'是接口部署的包名
        target: 'http://192.168.0.152:7001',//该包名部署的端口
        ws: true,
        changeOrigin: true
      }, 
      }
  },
  // 生产环境下的sourceMap
  productionSourceMap: true,
  chainWebpack: config => {
   
      if (process.env.NODE_ENV === 'production') {
   
          // 为生产环境修改配置...
          config
              .externals({
   
                  'vue': 'Vue',
                  'vue-router': 'VueRouter'
              })
      } else {
   
          // 为开发环境修改配置...
      }
  },
  lintOnSave: false, // eslint-loader 是否在保存的时候检查
}