如何在Vue.js项目中用Webpack配置URL别名及动态环境Axios baseURL？

问题描述 #

我有两个相关需求：

• 配置Webpack的URL别名，简化项目中文件路径的引用
• 在Vue.js应用中根据环境（开发/生产）动态设置Axios的请求基础URL：开发环境用http://localhost:85/app，生产环境用/app/

目前我的Axios配置代码如下：

import axios from 'axios';
const instance = axios.create({
  baseURL: 'http://localhost:85/app',
  headers: {
    'Accept' : 'application/json, text/javascript, */*; q=0.01',
    'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8',
  }
});
export default instance;

请问该如何配置Webpack来满足这些需求？

解决方案 #

一、配置Webpack URL别名 #

Webpack的别名配置通过resolve.alias实现，不同项目类型的配置方式略有区别：

1. Vue CLI创建的项目（vue.config.js）

在项目根目录的vue.config.js中添加以下配置（如果没有这个文件就新建一个）：

const path = require('path');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        // 把@指向项目根目录下的src文件夹，这是Vue项目的常用别名
        '@': path.resolve(__dirname, 'src'),
        // 你还可以根据自己的需求添加更多别名，比如：
        '@api': path.resolve(__dirname, 'src/api'), // 指向接口请求文件夹
        '@components': path.resolve(__dirname, 'src/components') // 指向组件文件夹
      }
    }
  }
}

配置完成后，你在代码里就可以用@/api/user.js代替../../api/user.js这种冗长的相对路径，既简洁又能避免路径层级变化带来的修改麻烦。

2. 自定义Webpack配置的项目（webpack.config.js）

直接在webpack.config.js的resolve字段下添加别名配置：

const path = require('path');

module.exports = {
  // ...其他Webpack配置项
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      // 按需添加更多自定义别名
    }
  }
}

二、根据环境动态设置Axios baseURL #

这里推荐结合Webpack的环境变量机制来实现，既灵活又便于维护，下面分两种场景说明：

场景1：Vue CLI项目

Vue CLI已经内置了环境变量的处理机制，你只需要在项目根目录创建两个环境配置文件：

• .env.development（开发环境配置文件）：

VUE_APP_BASE_URL=http://localhost:85/app

• .env.production（生产环境配置文件）：

VUE_APP_BASE_URL=/app/

注意：环境变量必须以VUE_APP_作为前缀，才能被Vue CLI自动注入到项目的process.env对象中。

然后修改你的Axios配置文件，直接使用这个环境变量：

import axios from 'axios';
const instance = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL, // 动态读取环境变量
  headers: {
    'Accept' : 'application/json, text/javascript, */*; q=0.01',
    'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8',
  }
});
export default instance;

之后运行npm run serve（开发环境）或npm run build（生产环境）时，Vue CLI会自动加载对应的环境配置，Axios的baseURL也会随之切换。

场景2：自定义Webpack配置的项目

我们可以使用Webpack自带的DefinePlugin插件来注入环境变量：

const webpack = require('webpack');
// 判断当前是否为生产环境
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  // ...其他Webpack配置
  plugins: [
    new webpack.DefinePlugin({
      // 把BASE_URL注入到全局，注意要用JSON.stringify处理字符串
      'process.env.BASE_URL': JSON.stringify(
        isProduction ? '/app/' : 'http://localhost:85/app'
      )
    })
  ]
}

接着修改Axios配置：

import axios from 'axios';
const instance = axios.create({
  baseURL: process.env.BASE_URL,
  headers: {
    'Accept' : 'application/json, text/javascript, */*; q=0.01',
    'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8',
  }
});
export default instance;

运行项目时，通过设置NODE_ENV来切换环境：

• 开发环境：webpack --mode development
• 生产环境：webpack --mode production

备选方案：直接在Axios中判断环境

如果不想修改Webpack配置，也可以直接在Axios文件中判断当前环境：

import axios from 'axios';

// Vue CLI或Webpack都会自动设置process.env.NODE_ENV
const isProduction = process.env.NODE_ENV === 'production';

const instance = axios.create({
  baseURL: isProduction ? '/app/' : 'http://localhost:85/app',
  headers: {
    'Accept' : 'application/json, text/javascript, */*; q=0.01',
    'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8',
  }
});
export default instance;

这种方式简单直接，但如果后续需要调整URL或者新增环境，修改起来不如环境变量灵活。

内容的提问来源于stack exchange，提问作者Skodsgn