vite 打包后拼后缀访问文件

您可以在vite.config.js中配置output属性来指定输出目录和文件名，例如：

export default {
  build: {
    outDir: 'dist', // 输出目录
    assetsDir: 'assets', // 静态资源目录
    rollupOptions: {
      output: {
        entryFileNames: '[name].[hash].js', // 入口文件名
        chunkFileNames: '[name].[hash].js', // 代码块文件名
        assetFileNames: '[name].[hash].[ext]', // 静态资源文件名
      },
    },
  },
};

在这个配置中，打包后的文件会被输出到dist目录下，文件名会加上hash值，比如main.abcd1234.js。您可以在HTML中引用它，如：

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

注意，这只是个示例，具体的配置选项和文件名格式您可以根据具体情况自行调整。

相关问题

vite打包 public文件访问

vite项目在打包后会将public文件夹下的文件直接放到dist文件夹下，但是如果将文件放到assets文件夹下，则json文件不会被一起打包，导致dist文件夹下没有json文件。对于vite生成的文件存在跨域问题，大多数项目开发都是将文件放在服务器中通过域名去访问，但是特殊情况需要直接访问静态资源，所以需要解决file存在跨域的问题。与webpack相比，webpack打包出的文件同样是file直接访问，但是不存在跨域问题。此外，webpack打包出的文件不带module，但是vite打包会带module。对于vite打包后的文件访问问题，一般情况下是可以正常访问的。如果出现空白页面，可能是因为路由组件没有正确加载。可以尝试将router.js文件中的history模式改为hash，然后重新打包和执行操作来解决该问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vite hash路由模式项目打包上线访问 json 文件方法](https://blog.csdn.net/qq_39111074/article/details/131456008)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vite打包静态文件打开显示空白](https://blog.csdn.net/A_bet_of_three_years/article/details/128809633)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

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` 下。记得在服务器配置或部署时，也要相应地调整静态资源路径指向。