vue.config.js基本配置模板及详解

最新推荐文章于 2025-04-03 00:00:00 发布

悲伤日记

最新推荐文章于 2025-04-03 00:00:00 发布

阅读量2.4k

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Crazymryan/article/details/107037051

本文提供了一个vue.config.js的基础配置模板，并对其各项配置进行了详细的解读，包括部署URL、输出目录、静态文件存放、HTML输出路径、文件哈希、代码格式检查、编译器使用、忽略文件、生产环境Source Map、CSS配置、日志清理等内容，帮助开发者更好地理解和配置Vue项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

❝
关于vue.config.js 的配置，总是需要重复去配置，所以严老湿呢，给大家带来一个简单的小模版，顺带细致讲解一下，最下面有全部集合，我们不是代码的创造者，我们只是代码的搬运工
❞

部署应用包的基本URL

// 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath
publicPath: process.env.NODE_ENV === "production" ? "./" : "./"

生产环境构建文件的目录 defalut: dist

outputDir: "dist",

放置生成的静态文件目录（js css img）

assetsDir: "static",

指定生成的index.html 输出路径相对 default: index.html

indexPath: "index.html",

指定生成文件名中包含hash default: true

filenameHashing: true,

是否保存时 lint 代码

lintOnSave: process.env.NODE_ENV === "production",

是否使用编译器 default: false

runtimeCompiler: false,

默认babel-loader会忽略node_modules中的文件，你想显示的话在这个选项中列出来

transpileDependencies: []

生产环境的source map

productionSourceMap: true,

css相关配置

css: {
      // 是否使用css分离插件 ExtractTextPlugin
      extract: true,
      // 开启 CSS source maps?
      sourceMap: false,
      // css预设器配置项
      loaderOptions: {},
      // 启用 CSS modules for all css / pre-processor files.
      modules: false
},

清除 console 语句

drop_console: true

清除 debugger 语句

 drop_debugger: true,

webpack-dev-server 相关配置

devServer: {
        /* 自动打开浏览器 */
        open: true,
        /* 设置为0.0.0.0则所有的地址均能访问 */
        host: '0.0.0.0',
        /*端口号*/
        port: 8080,
        https: false,
        hotOnly: false,
        /* 使用代理 */
        proxy:{
            '/api': {
                /* 目标代理服务器地址 */
                target: 'http://47.104.209.14:8080/',
                /* 允许跨域 */
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '' //路径重写
          	}
        },
    },
},

模板

module.exports = {
    /* 部署应用包的基本URL */
    /* baseUrl 从 Vue CLI 3.3 起已弃用 ，请使用publicPath */
    //  baseUrl: process.env.NODE_ENV === "production" ? "./" : "./",
    publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
    /* 生产环境构建文件的目录 defalut: dist */
    outputDir: "dist",
    /* 放置生成的静态文件目录（js css img） */
    assetsDir: "static",
    /* 指定生成的index.html 输出路径 相对 default: index.html */
    indexPath: "index.html",
    /* 指定生成文件名中包含hash default: true */
    filenameHashing: true,
    /* 是否保存时 lint 代码 */
    lintOnSave: process.env.NODE_ENV === "production",
    /* 是否使用编译器 default: false */
    runtimeCompiler: false,
    /* 默认babel-loader会忽略node_modules中的文件，你想显示的话在这个选项中列出来 */
    // transpileDependencies: [],
	/* 生产环境的source map */
	// 禁止console
	// drop_console: true,
	// 禁止debug语句
	// drop_debugger: true,
    productionSourceMap: true,
    // crossorigin: "",
    integrity: false,
    configureWebpack: {
       resolve: {
        alias: {
          'assets': '@/assets',
          'components': '@/components',
          'views': '@/views',
        }
      }
    },
    // css相关配置
    css: {
      // 是否使用css分离插件 ExtractTextPlugin
      extract: true,
      // 开启 CSS source maps?
      sourceMap: false,
      // css预设器配置项
      loaderOptions: {},
      // 启用 CSS modules for all css / pre-processor files.
      modules: false
    },
    devServer: {
      port: 8080,
      host: "0.0.0.0",
      https: false,
      // 自动启动浏览器
      open: false,
      proxy: {
        "/api": {
            //代理路径 例如 https://baidu.com
            target:  "https://baidu.com",
            // 将主机标头的原点更改为目标URL
            changeOrigin: true,
            ws: true,
            pathRewrite: {
              "^/api": ""
            }
          }
      }
    }
};

想要查阅更多精彩文章，扫一扫关注“悲伤日记”