Vue CLI配置怎么设置？vue.config.js详解

vue-cli配置的核心是围绕vue.config.js、环境变量、代理、构建优化和插件体系展开；把这几块理顺，大部分Vue 2与Vue 3项目的工程化需求都能覆盖。 下面从基础文件讲到跨域、对比vite、企业级实战与常见坑,每步都有可复制的命令和配置片段。

vue-cli基础配置：从哪个文件开始改

vue.config.js 是默认入口

据Vue CLI官方文档，vue.config.js 是一个可选的配置文件，放在项目根目录，与 package.json 同级，常用字段包括 publicPath、outputDir、assetsDir、devServer、configureWebpack 和 chainWebpack。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/app/' : '/',
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false
}

• publicPath：部署路径,子目录部署时尤其重要。
• outputDir：打包输出目录，默认 dist。
• assetsDir：静态资源子目录,默认空。
• productionSourceMap：生产环境是否生成 source map，设为 false 可减少体积。

环境变量与模式

Vue CLI 使用 .env 文件管理环境变量，只有以 VUEAPP 开头的变量才会注入客户端。

• .env：所有环境共享。
• .env.development：开发环境。
• .env.production：生产环境。
• .env.staging：预发环境,需手动指定模式。

# 构建 staging
vue-cli-service build --mode staging

在代码中通过 process.env.VUE_APP_API_BASE 读取,不要直接把密钥写进前端变量。

package.json 脚本配置

常见脚本如下：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:report": "vue-cli-service build --report",
    "lint": "vue-cli-service lint"
  }
}

--report 会生成包体积分析页面,方便定位大模块。

vue-cli项目怎么配置跨域代理？

devServer.proxy 基础写法

跨域是前端开发高频问题，在 vue.config.js 中配置 devServer.proxy：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://192.168.1.100:8080',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

改完必须重启 npm run serve,代理才会生效。

多路径代理与路径重写

后端有多个服务时,可以分别代理：

proxy: {
  '/api': {
    target: 'http://api.example.com',
    changeOrigin: true,
    pathRewrite: { '^/api': '' }
  },
  '/user': {
    target: 'http://user.example.com',
    changeOrigin: true
  }
}

• 请求 /api/order 会转发到 http://api.example.com/order。
• 请求 /user/info 会转发到 http://user.example.com/user/info。
• pathRewrite 写错是代理 404 的常见原因。

生产环境代理

生产环境一般不用 devServer.proxy，而是在 Nginx 层做反向代理。

location /api/ {
  proxy_pass http://backend/;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
}

前端只请求同域 /api，由 Nginx 转发，这样更稳定,也避免把后端地址暴露在客户端。

vue-cli和vite配置区别对比

配置文件与启动速度

| 对比项 | vue-cli | vite |
| 配置文件 | vue.config.js | vite.config.js |
| 开发启动 | 基于 webpack，冷启动较慢 | 基于 esbuild，冷启动快 |
| 热更新 | 较大项目偏慢 | 原生 ESM，HMR 快 |
| 构建工具 | webpack | rollup |
| 插件生态 | 老项目多，插件丰富 | 新项目增长快 |
| 迁移成本 | 已有项目低 | 中高，需改配置和插件 |

插件生态与迁移成本

vue-cli 通过 @vue/cli-plugin-router、@vue/cli-plugin-vuex、@vue/cli-plugin-eslint 等插件管理能力，vite 则使用 @vitejs/plugin-vue 及各类 vite-plugin-。

迁移时要重点改：

• public/index.html 移到根目录 index.html。
• require 改为 import。
• process.env.VUE_APP_ 改为 import.meta.env.VITE_。
• webpack loader 需要找 vite 对应插件。

什么场景仍建议用vue-cli

• 维护 Vue 2 老项目,迁移风险高。
• 团队已熟悉 webpack 配置。
• 项目依赖特定 webpack loader 或插件，vite 暂无平替。
• 交付周期紧,稳定优先。

企业级后台管理系统vue-cli配置实战

多环境变量与打包优化

企业级后台通常有开发、测试、预发、生产四套环境,可以建：

• .env.development
• .env.test
• .env.staging
• .env.production

在 .env.staging 中设置：

NODE_ENV=production
VUE_APP_ENV=staging
VUE_APP_API_BASE=https://staging-api.example.com

打包时运行 vue-cli-service build --mode staging，关闭 source map、开启 gzip、拆分 vendor 是常见优化方向。

按需加载与externals

路由懒加载：

const Home = () => import('@/views/Home.vue')

组件库按需引入，减少首屏体积，对于 vue、vue-router、element-ui 这类稳定依赖，可以用 externals 挂 CDN：

configureWebpack: {
  externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    'element-ui': 'ELEMENT'
  }
}

注意 CDN 版本必须和本地依赖一致,否则容易出现运行时错误。

部署与缓存策略

• publicPath 指向 CDN 或子目录。
• outputDir 设为 dist。
• assetsDir 设为 static。
• filenameHashing 默认开启，静态资源带 hash,便于缓存。
• Nginx 配置 try_files $uri $uri/ /index.html;，解决 history 路由刷新 404。

北京Vue项目vue-cli配置常见问题

路径别名与大小写

用 chainWebpack 配置 别名：

const path = require('path')
module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('@', path.resolve(__dirname, 'src'))
  }
}

本地 Windows 开发正常，部署到 Linux 服务器可能因大小写报模块找不到，检查 import 路径是否和文件名完全一致。

代理跨域与 cookie

changeOrigin: true 能解决多数跨域，但 cookie 可能丢失,可以加：

cookieDomainRewrite: 'localhost'

如果后端设置了 SameSite 或 Secure,还要确认开发环境协议和域名。

打包后空白页

优先检查 publicPath，部署到子目录时，设为 或 '/子目录/'，其次检查路由模式，history 模式需要服务端支持；hash 模式不需要额外配置。

vue-cli配置常见问题解答

vue-cli配置外包大概多少钱？

价格受项目复杂度、环境数量、部署要求和是否包含旧项目迁移影响，多数情况下，简单配置调整按人天计费，企业级多环境加优化会更高，行业共识认为,先明确需求清单再询价更靠谱。

vue-cli配置和vite配置哪个更适合新项目？

新项目若用 Vue 3 且无特殊 webpack 依赖，vite 配置更简洁、启动更快，若团队已有大量 vue-cli 插件和 webpack 定制，继续用 vue-cli 更稳，业内专家指出,迁移收益要结合团队熟悉度和项目生命周期评估。

vue-cli项目怎么配置跨域代理后仍然404？

先确认 devServer.proxy 写在 vue.config.js 中，而不是 package.json，再检查请求路径是否匹配代理 key，比如请求 /api/user 会命中 /api 代理，最后看 pathRewrite 是否把路径重写错，以及后端服务是否可达，重启 npm run serve 后,代理配置才会生效。

vue-cli配置不是背字段，而是理解入口文件、环境变量、代理和构建链路，把 vue.config.js 当成项目工程化的控制面板，按场景逐项调整,就能在维护老项目和快速交付之间找到平衡。