打包文件配置哈希值（uniapp+vue.config.js/vite.config.js）vue.config.js

`vue.config.js`

方案一

let filePath = '';   // 默认文件路径
//编译环境判断，可以根据不同环境来做相应的配置
if (process.env.UNI_PLATFORM === 'h5') { // 这里是针对uniapp h5打包
  filePath = 'static/js/' // js存放路径
}

module.exports = {
  configureWebpack: {
    output: { // filePath: 路径 name: 默认文件名
      filename: `${filePath}[name].[hash].js`,
      chunkFilename: `${filePath}[name].[hash].js`
    },
  },
}

方案二

let filePath = '';   // 默认文件路径
//编译环境判断，可以根据不同环境来做相应的配置
if (process.env.UNI_PLATFORM === 'h5') {
  filePath = 'static/js/' // js存放路径
}
module.exports = {
  configureWebpack: config => {
    if (process.env.UNI_PLATFORM === 'h5') {
      config.output = {
        ...config.output,
        filename: `${filePath}[name].[hash].js`,
        chunkFilename: `${filePath}[name].[hash].js`
      };
    }
  }
};

configureWebpack 和 configureWebpack 区别

configureWebpack ：

接受一个对象或一个函数，可以直接修改 Webpack 配置。
更适合做简单的配置修改，比如添加插件、扩展 entry 和 output 等属性。
可以直接返回一个新的 Webpack 配置对象，或者用函数修改现有的配置。

chainWebpack ：

允许使用 webpack-chain 提供的链式 API，更加细粒度地控制 Webpack 配置。
特别适合需要修改复杂的 Webpack 配置结构的情况，比如调整某个 loader 的具体选项，或根据条件进行更深入的配置。
使用链式操作来设置配置项，便于更灵活地增删改查特定的配置。

`vite.config.js`

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

export default defineConfig({
  plugins: [vue()],
  base: '/h5/',  // 用于设置静态资源的基础路径
  build: {
    outDir: 'dist',    // 构建输出目录
    sourcemap: true,   // 是否生成 source map
    rollupOptions: {
      output: {
        entryFileNames: `assets/[name].[hash].js`,
        chunkFileNames: `assets/[name].[hash].js`,
        assetFileNames: `assets/[name].[hash].[ext]`
      }
    }
  }
});

或者

import { defineConfig } from 'vite';

export default defineConfig(({ command }) => {
  if (command === 'build') {
    return {
      build: {
        sourcemap: false,
        rollupOptions: {
          output: {
            // 动态调整文件名格式
            entryFileNames: `[name].[hash].js`,
          }
        }
      }
    };
  }
});

在 vite.config.js 中，command 是 Vite 传递给配置文件的一个参数，用于指示当前运行的是开发服务器还是构建命令。这个参数的值通常是以下两种之一：

'serve' ：表示当前是开发模式，运行 vite 或 vite serve。
'build' ：表示当前是构建模式，运行 vite build。

vite 的其他配置

环境区分：

mode用于区分不同的环境（development``production）

基础路径设置：

export default defineConfig({
  base: '/my-app/', // 设置应用的基础路径，适用于放在子路径的场景
});

server 配置

export default defineConfig({
  server: {
    port: 3000,          // 指定开发服务器端口
    open: true,          // 启动后自动在浏览器打开
    proxy: {             // 配置代理，用于解决跨域问题
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        rewrite: path => path.replace(/^/api/, '')
      }
    }
  }
});

changeOrigin

作用：将请求的“来源”改为目标地址。
场景：一些服务器会校验请求的来源，以防止跨站请求伪造（CSRF）等攻击。因此，启用 changeOrigin 可以避免因为来源不一致而导致请求被拒绝。

rewrite

作用：重写请求路径。
场景：当代理路径和目标路径不一致时使用。例如，你希望请求 http://localhost:3000/api/users 实际访问 https://api.example.com/users，则可以使用 rewrite 去除 /api 前缀。

别名（Alias）

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 为 src 设置别名 '@'
      'components': path.resolve(__dirname, 'src/components'),
    }
  }
});

插件（Plugins）

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

export default defineConfig({
  plugins: [vue()]
});

define配置

define 用于在打包过程中注入全局常量，通常用于构建时的条件控制。

export default defineConfig({
  define: {
    __APP_VERSION__: JSON.stringify('v1.0.0')
  }
});
// 在代码中可以使用__APP_VERSION__获取到值

打包文件配置哈希值（uniapp+vue.config.js/vite.config.js）

vue.config.js

方案一

方案二