vue.config.js/vite.config.js配置详解注释

vue.config.js配置详解

基础配置

module.exports = {
  // 部署应用包时的公共路径
  publicPath: "./",
  // 生产环境构建文件的目录名（默认为dist）
  outputDir: "dist",
  // 放置生成的静态资源的目录（默认为static）,可以修改为public。
  assetsDir: "static",
  // 生产环境是否生成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: {
        prependData: @import "@/style/global.scss";,
      },
    },
    // 启用 CSS modules for all css / pre-processor files.
    requireModuleExtension: false,
  },

第三方插件配置

pluginOptions: {},

vite.config.js 配置详解

基本配置

1. npm run build 打包时配置选项：base、build选项
2. npm run dev 启动配置、反向代理配置：server 选项

import { defineConfig } from "vite";
import path from "path";
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    base: env.VITE_MODE === 'production' ? './' : '/',
    plugins:[vue()],
    resolve: {
        alias: {
          "@": path.resolve(__dirname, 'src'),
        }
    },
    build: {
      target: 'modules',
      outDir: 'dist',
      assetsDir: 'assets',
      sourcemap: false, // 不生成 source map
      minify: 'terser' // 混淆器
    },
    server: {
        cors: true,
        open: true,
        proxy: {
          '/api': {
              target: 'http://url***',   //代理接口
              changeOrigin: true,
              rewrite: (path) => path.replace(/^\/api/, '')
          }
        }
    }
});

源码下载:https://gitee.com/leolee18/vue3-project

系列文档

vue3 两种创建方式详解(cli和vite)
vue.config.js/vite.config…
vue3 自动引入自定义组件
vueX vue3自动引入匹配的modules
vue3 自定义指令控制按钮权限的操作
vuex与axios网络请求解耦
移动端rem适配布局