vite4 打包 设置asset资源路径

Vite4 在打包时，可以通过 `assetsDir` 属性来设置静态资源的输出目录。默认情况下，Vite4 会将静态资源输出到 `dist` 目录下的根目录中，如果需要修改输出目录，可以按照以下步骤进行操作：

1. 在项目根目录下创建一个 `vite.config.js` 文件，用于配置 Vite4。

2. 在 `vite.config.js` 文件中添加以下代码：

   module.exports = {
     build: {
       assetsDir: 'static' // 设置静态资源的输出目录
     }
   }

其中，`assetsDir` 属性的值为静态资源的输出目录，例如 `static` 表示输出到 `dist/static` 目录中。

3. 执行以下命令进行打包：

   npm run build

4. 打包完成后，在项目根目录下会生成一个 `dist` 目录，里面包含了打包后的静态文件和静态资源，静态资源的路径为 `assetsDir` 属性设置的地址。

需要注意的是，`assetsDir` 属性只会影响静态资源的输出目录，对于其他静态文件（如 `index.html`）的输出目录，仍然需要使用 `base` 属性来设置。

相关问题

vite4 打包静态文件如何设置相对路径

在 Vite4 中，可以通过 `base` 属性来设置打包后静态文件的相对路径。默认情况下，Vite4 会将静态文件的路径设置为根路径 `/`，如果需要设置相对路径，可以按照以下步骤进行操作：

1. 在项目根目录下创建一个 `vite.config.js` 文件，用于配置 Vite4。

2. 在 `vite.config.js` 文件中添加以下代码：

   module.exports = {
     base: './' // 设置打包后静态文件的相对路径
   }

其中，`base` 属性的值为相对路径的地址，例如 `./` 表示相对于打包后的 `index.html` 文件所在的目录，`../` 表示相对于打包后的 `index.html` 文件所在的上级目录。

3. 执行以下命令进行打包：

   npm run build

4. 打包完成后，在项目根目录下会生成一个 `dist` 目录，里面包含了打包后的静态文件，静态文件的路径为相对路径设置的地址。

vite 打包后script文件的路径配置

Vite 是一个由 Vue.js 团队开发的高性能前端构建工具，它采用预渲染技术，实现了近乎实时的热更新。当你使用 Vite 进行项目打包时，对于 `script` 文件（JavaScript 脚本），其路径通常会自动生成并配置在 `index.html` 或者其他静态 HTML 输出文件中。

Vite 的默认配置下，打包后的 JavaScript 文件会被放置在 `dist` 目录下的 `js` 子目录中，并且路径会相对地引用到 `index.html`。例如，如果你有一个名为 `src/main.js` 的入口文件，打包后生成的 JavaScript 文件可能会像这样引用：

<script type="module" src="/js/main.js"></script>

如果你想要自定义输出路径，可以在 Vite 的配置文件 `.vite.config.js` 中通过 `build.rollupOptions.output` 配置选项来设置。例如：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        dir: 'custom-output-dir', // 自定义输出目录
        entryFileNames: '{name}.js', // 自定义文件名模式
        chunkFileNames: 'chunks/[name].js',
      },
    },
  },
});

这将把打包后的 JavaScript 放到 `custom-output-dir` 下。记得在服务器配置或部署时，也要相应地调整静态资源路径指向。