初入Vue（二）-vue.config.js

最新推荐文章于 2025-10-11 19:30:31 发布

原创

最新推荐文章于 2025-10-11 19:30:31 发布 · 4.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文详细介绍了Vue3.x项目中vue.config.js的配置选项，如publicPath、outputDir、assetsDir等，以及devServer的代理设置。重点讨论了filenameHashing如何帮助控制缓存，以及lintOnSave的代码检查策略。同时，提到了configureWebpack和chainWebpack用于自定义Webpack配置，以及devServer的代理配置用于多环境部署。文章还提醒了读者理解浏览器缓存机制，并给出了生产环境优化建议。

前言

已下基于 Vue3.x 版本

vue.config.js 是一个配置文件，存在与项目的根目录中。他会被 @vue/cli-service 自动加载。

创建一个新项目，会有如下空配置：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
})

该文件应该导出一个包含了选项的对象

配置解读

baseUrl

从 Vue CLI 3.3 起已弃用，现在都使用 publicPath

publicPath

默认值：'/'

是部署应用包时的基本 URL，在 Vue CLI的其他地方也会使用这个值，默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.qjdchina.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.qjdchina.com/h5/，则设置 publicPath 为 /h5/。

这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。

像目前我们风险专家 app，里面的评估详情，就区分出了不同环境的不同根路径，使用一个条件式的值：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: process.env.NODE_ENV === "production" ? "/h5/" : "/"
})

outputDir

默认值: dist

build 生成的生产环境构建文件目录，可以是静态路径，也可以是相对路径，在 build 后传入 --no-clean 可关闭默认的构建前自动清除功能。默认如下：

module.exports = {
  publicPath: './', // 基本路径
  outputDir: 'dist', // 输出文件目录
}

assetsDir

build 生成的生产环境的静态资源文件夹，包括 js、css、img、fonts ，默认如下：

module.exports = {
  publicPath: './', // 基本路径
  outputDir: 'dist', // 输出文件目录
  asset

最低0.47元/天解锁文章