vue3 vue.config.js配置

// vue.config.js文件是用于Vue CLI项目的全局配置的

module.exports = {

  // 部署应用包时的公共路径

  publicPath: "./",

  // 生产环境构建文件的目录名（默认为dist）

  outputDir: "dist",

  // 放置生成的静态资源的目录（默认为dist/static）,可以修改为public。

  assetsDir: "static",

  // 开启eslint保存检测，有效值true/false/error

  lintOnSave: true,

  // 生产环境是否生成sourceMap文件，一般情况不建议打开

  productionSourceMap: false,

  // devServer相关配置

  devServer: {

    // 访问项目的IP地址，可以设置为“0.0.0.0”来使项目外部可访问

    host: "0.0.0.0",

    // 访问项目的端口号

    port: 8080,

    // 是否开启HTTPS模式

    https: false,

    // 自动启动浏览器

    open: true,

    // 配置反向代理处理跨域请求

    proxy: {

      // 请求地址

      "/api": {

        // 目标地址

        target: "http://localhost:3000",

        // 是否开启跨域

        changeOrigin: true,

        // 重写路径

        pathRewrite: {

          "^/api": "/api",

        },

      },

    },

  },

  // webpack相关配置

  configureWebpack: {

    // 是否启动新的进程执行打包

    parallel: true,

    // 打包性能检测

    performance: {

      hints: "warning",

      // 入口起点大小，此项必须设置

      maxAssetSize: 300000,

      // 生成的文件最大限制为1024KB

      maxEntrypointSize: 5000000,

    },

    // // externals

    // externals: {

    // vue: "Vue",

    // "vue-router": "VueRouter",

    // axios: "axios",

    // lodash: "_",

    // echarts: "echarts",

    // moment: "moment",

    // },

  },

  // css相关配置

  css: {

    // 是否使用css分离插件

    extract: true,

    // 是否开启CSS source map

    sourceMap: false,

    // css预设器配置项

    loaderOptions: {

      sass: {

 @import "@/style/global.scss";,

      },

    },

    // 启用 CSS modules for all css / pre-processor files.

    requireModuleExtension: false,

  },

  // 第三方插件配置

  pluginOptions: {},

};

// 配置说明

// publicPath 部署应用包时的公共路径。例如，如果应用程序的 URL 是http://localhost:8080/my-app/，则设置publicPath选项为'/my-app/'，它将确保所有在HTML中使用的URL都正确的后续资源都具有正确的基本URI。

// outputDir 生产环境构建文件的目录名（默认dist）。

// assetsDir 放置生成的静态资源（js css img）的目录（默认dist/static）

// lintOnSave 启用 lint 检查器，有效值 true/false/error/warn，在生产构建时禁用它。

// productionSourceMap 如果您不需要生产时的source map，那么将其设置为false可以加速生产构建。

// configureWebpack 可以指定一个额外的对象来将这些配置传递给Webpack合并到最终配置中。

// devServer devServer跟服务器相关的配置项，如本地端口、代理等，具体可参考vue官网文档。

// css 单独的css文件的相关配置，包括源码、生成路径等，可自定义相关配置项。

// pluginOptions 用于插件在webpack下的一些配置项。例如vue-cli-plugin-style-resources-loader 和 vue-cli-plugin-mock，该插件是在测试环境下模拟数据请求的图标插件等。

这篇好文章是转载于：学新通技术网