vue.config.js配置详解注释

最新推荐文章于 2025-02-12 10:38:04 发布

Yolo416

最新推荐文章于 2025-02-12 10:38:04 发布

阅读量408

点赞数

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

本文链接：https://blog.csdn.net/m0_50125215/article/details/127111092

版权

本文详细解读Vue项目的配置文件vue.config.js，涵盖了从基本配置到高级特性的全面解析，包括公共路径调整、代理设置、模块打包配置等关键知识点，帮助开发者深入理解并定制Vue项目的构建过程。

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

// vue.config.js
const path = require('path');
const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启gzip压缩， 按需引用
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; // 开启gzip压缩， 按需写入
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // 打包分析
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
const resolve = (dir) => path.join(__dirname, dir);
//用于生产环境去除多余的css
const PurgecssPlugin = require("purgecss-webpack-plugin");
//全局文件路径
const glob = require("glob-all");
//压缩代码并去掉console
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
module.exports = {
   
  publicPath: process.env.NODE_ENV === 'production' ? '/site/vue-demo/' : '/', // 公共路径
  indexPath: 'index.html' , // 相对于打包路径index.html的路径
  outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
  assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录
  lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
  runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
  productionSourceMap: !IS_PROD, // 生产环境的 source map
  parallel: require("os"

最低0.47元/天解锁文章