VUE3 vue.config.js配置

提示：npm配置的写法，vite大致差不多，名称不太一样。

devServer在vite里面是server

const { defineConfig } = require('@vue/cli-service')
const path = require('path');
const webpack = require('webpack');
const developmentPath='/';//开发环境-npm run serve时引用文件路径
const productionPath='./';//生产环境-npm run build打包后引用文件路径
const isProduction=process.env.NODE_ENV === 'production'//是否生产环境
// const proxy=function (){//封装多个跨域请求
//   let apiPathArr=['/api','/code','/admin']
//   let proxys={}
//   for(let i=0;i<apiPathArr.length;i++){
//     proxys[apiPathArr[i]]={
//       target: 'http://apis.juhe.cn',
//       ws: false,
//       changeOrigin: true,
//       pathRewrite:{
//         [`^${apiPathArr[i]}`]:apiPathArr[i]
//       }
//     }
//   }
//   return proxys
// }()
const os = require("os");//导入网络配置所有参数
let needHost = "0.0.0.0";
try {
  let network = os.networkInterfaces();
  needHost = network[Object.keys(network)[0]][1].address;//获取当前IP地址
} catch {
  needHost = "localhost";
}
module.exports = defineConfig({//不用defineConfig也可以，使用会增加提示。
  transpileDependencies: false,
  // baseURL:'./'  // vue-cli版本是3.2.0以前的，baseUrl / publicPath
  // publicPath:'./',
  /**
  *一、publicPath属性适用于vue-cli 高于3.2.0的项目。公共路径:项目部署的地址，开发的时候用/，生产的时候./，在历史模式中要是反着写开发的时候用过./刷新会错误，/生产后打开会白屏，或者路径错误。
  *二、如果服务器有多个VUE项目,服务器下面会多一级目录，这里则需要写加上文件夹名字比如'web2'，所有访问路径都会在前面加上web2,访问的时候就会是web2/static/......，不然会访问不到所有的静态文件。
  */
  publicPath: isProduction ? productionPath: developmentPath,
  outputDir: 'dist',// 项目的打包地址（默认dist）,在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）
  indexPath:'index.html',// 指定生成的 index.html 的输出路径 (相对于 outputDir)，不写默认index.html。
  assetsDir: 'static',// 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下），相对于outputDir目录。
  //source map的作用就是定位浏览器控制台输出语句在项目文件的位置多少行
  productionSourceMap: !isProduction,// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建,不写默认true
  parallel: require("os").cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
  // false：   关闭每次保存都进行检测
  // true：    开启每次保存都进行检测，效果与warning一样
  // warning： 开启每次保存都进行检测，lint 错误将显示到控制台命令行，而且编译并不会失败。
  // error：   开启每次保存都进行检测，lint 错误将显示到浏览器页面上，且编译失败。
  // default： 同’error’
  lintOnSave: !isProduction,// 是否在保存的时候检查eslint验证
  filenameHashing:true,//关闭静态文件名为哈希,无法使用就false关闭,不写默认true
  devServer: {// webpack-dev-server 代理配置相关配置
    open: true,// 编译后，是否后自动打开浏览器
    host:needHost,// 浏览器打开的域名
    https: false,// 是否是https
    port: 8080,// 端口号
    hot: true,//hot配置是否启用模块的热替换功能，devServer的默认行为是在发现源代码被变更后，通过自动刷新整个页面来做到事实预览，开启hot后，将在不刷新整个页面的情况下通过新模块替换老模块来做到实时预览。
    headers: {
      'Access-Control-Allow-Origin':'*'// 允许被主应用跨域fetch请求到
    },
    // proxy,
    proxy: {// 代理匹配规则
      '/api': {// 请求时开始匹配的url
        target: 'http://apis.juhe.cn',// 要访问的跨域的域名
        ws: false,// 是否代理 websocket
        secure:false,// 是否https协议,false则http
        changeOrigin: true,// 是否跨域
        // toProxy: false,// 是否传递绝对URL作为路径（对代理很有用），可不写。
        // prependPath: true,// 默认值:true 指定是否将目标的路径添加到代理路径，可不写。
        // ignorePath: false,// 默认值:false 指定是否忽略传入请求的代理路径，可不写。
        // agent:{},// 传递给http(s).request的对象，使用才写，不然报错。
        // ssl:{},// 传递给https.createServer()的对象，使用才写，不然报错。
        pathRewrite: {//重写路径，请求的时候使用这个，
          '^/api': ''//把 /api 变为空字符串
        }
      },
    }
  },
  css: {// css相关配置
    extract: false, // 是否使用css分离插件 ExtractTextPlugin
    sourceMap: true, // 是否开启source maps,开启可能会影响构建性能,可以明确的指导css代码在项目文件中的位置。使用css.sourceMap时，我们建议关闭css.extract
    loaderOptions: {
      scss: {
        // 全局sass变量，使用时候<style lang="scss">//</style>里面要有内容，不然不生效
        //sass-loader 8.0.0以前版本 , v8- - data, v8 - prependData, v10+ - additionalData
        additionalData: `@import "@/assets/css/reset.scss";`, //注意配置的键名
      }
    }
  },
  pwa: {// PWA 插件传递选项。
    iconPaths: {//ico图标
      favicon32: 'favicon.ico',
      favicon16: 'favicon.ico',
      appleTouchIcon: 'favicon.ico',
      maskIcon: 'favicon.ico',
      msTileImage: 'favicon.ico',
    }
  },
  /*
  *chainWebpack通过链式编程的形式，来修改默认的webpack配置
  *configureWebpack通过操作对象的形式，来修改默认的webpack配置
  *使用configureWebpack对象，下面可以直接按照webpack中的写法进行编写
  *编写的内容，最终会被webpack-merge插件合并到webpack.config.js主配置文件中
  */
  configureWebpack: {
    resolve: {
      alias:{
        '@': path.resolve('src'),
        'assets' :'@/assets',
        'components':'@/components',
        'network':'@/network',
        'utils':'@/utils',
        'views':'@/views',
      }
    },
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif|webp|avif)(\?.*)?$/,
          type: 'asset',
          parser: {
            dataUrlCondition: {
              // 这里我将默认的大小限制改成6k。
              // 当图片小于6k时候，使用base64引入图片；大于6k时，打包到dist目录下再进行引入
              maxSize: 1024 * 6
            }
          }
        }
      ]
    },
    /*
    *当然要使用jquery,需要npm安装下，即npm i jquery -S,现在你就可以在任意vue页面中不需要import导入jquery就能使用了。
    *也可以引入自定义的方法到全局
    */
    plugins: [
      new webpack.ProvidePlugin({//默认情况下，模块解析路径为当前文件夹（./**)和node_modules
        $: "jquery",
        jQuery: "jquery",
        utils: path.resolve(path.join(__dirname, '','src/utils/index.js'))//通过路径引入全局方法
      })
    ]
  },
  pluginOptions:{//第三方插件配置
  },
})