vite.config.js或者vue.config.js配置方式

import { defineConfig } from "vite";
import { resolve } from "path";
import vue from "@vitejs/plugin-vue";
import { createSvg } from "./src/icons/index";
export default defineConfig({
  // 添加svg插件
  plugins: [vue(), createSvg("./src/icons/svg/")],
  // 识别 @ 符号为"./src"目录开始
  resolve: {
    alias: {
      "@": resolve("./src"),
    },
  },
  server: {
    // 开启 https，一般不开启
    https: true,
    //配置代理转发，解决跨域问题，可以配置多个
    proxy: {
      "/abc": {
        target: "http://123.456.78.180/",
        changeOrigin: true,
        ws: true,
        rewrite: (path) =>
          path.replace(/^\/abc/, "/abc"),
      }
    },
  },
  css: {
    //css预处理
    preprocessorOptions: {
      additionalData: '@import "@/styles/layout.scss";',
    },
  },
});

const path = require('path')
module.exports = {
  publicPath: './', // 打包出的目标代码就可以在任意目录下访问
  //  publicPath: '/app/', //署应用包时的基本 URL。  vue-router history模式使用
  outputDir: 'dist', //  生产环境构建文件的目录
  assetsDir: 'static', //  outputDir的静态资源(js、css、img、fonts)目录
  lintOnSave: false,
  productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  devServer: {
    port: 8082, // 端口   
    https: true,// 开启 https，一般不开启
    open: false, // 启动后打开浏览器
    disableHostCheck: true,
    overlay: {
      //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
      warnings: false,
      errors: true
    },
   proxy: {
     //配置跨域
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true // 允许跨域
        pathRewrite: {
           '/api': '/api'
        }
      }
    }
}

 import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
/* path模块是node.js的内置模块     不支持ts若使用->npm install @types/node -D */
import { resolve } from 'path';
/*还需amfe-flexible   在main中直接引入即可*/
import postCssPxToRem from "postcss-pxtorem";  //npm i postcss-pxtorem -D
export default defineConfig({
  base: "./", 
  plugins: [vue()],
  resolve: {
    alias: {
    /*定义全局路径*/
      '@': resolve(__dirname, './src'),
      '^': resolve(__dirname, './src/views'),
      '#': resolve(__dirname, './src/components')
    }
  },
  css: {
    postcss: {
      plugins: [
      /*适配rem  也可在根目录创建postcss.config.js配置  详见:*/
        postCssPxToRem({
          rootValue: 75,  //1rem大小  px转rem的算法是，设计稿量的值/设计稿的宽度=rem的值
          propList: ['*'],  //需要转换的属性
          mediaQuery: true,  //允许在媒体查询中生效
        })
      ]
    },
    preprocessorOptions: {
      stylus: {
      /*vite  根据官档  @import 引入stylus不生效 需要通过绝对路径导入 */
        imports: [resolve(__dirname, 'src/stylus/...styl')]  //配置全局变量
      }
    }
  },
  build: {
    minify: 'terser',   //v3 terser 是可选依赖项  需安装 npm i terser 
    terserOptions: {
      compress: {
        //生产环境时移除console
        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
    /*输出文件路径*/
      output: {
        entryFileNames: 'static/js/[name]-[hash].js',
        chunkFileNames: 'static/js/[name]-[hash].js',
        /*静态资源筛选*/
        assetFileNames: assetInfo => {
          var info = assetInfo.name.split('.')
          var extType = info[info.length - 1]
          if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(assetInfo.name)) {
            extType = 'img'
          } else if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(assetInfo.name)) {
            extType = 'fonts'
          }
          return `static/${extType}/[name]-[hash][extname]`
        },
      }
    }
  },
})