vite 打包后拼后缀访问文件
时间: 2024-05-08 08:18:19 浏览: 22
您可以在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打包后的静态文件有什么办法直接运行
Vite 是一个现代化的构建工具,能够以极快的速度构建现代化的 JavaScript 应用程序。在使用 Vite 构建静态文件后,我们可以通过以下几种方法直接运行它们:
1. 本地服务器:在 Vite 打包后生成的 dist 目录中,可以使用任意一种本地服务器工具,如 Nginx、Apache 或简单的 Python 本地服务器模块,将其设置为根目录。然后通过在浏览器中打开本地服务器地址来访问静态文件。
2. 文件协议:在浏览器地址栏中直接使用文件协议(file://)来打开 Vite 打包后的静态文件。例如,如果静态文件位于 dist 目录下的 index.html 文件中,可以在浏览器地址栏中输入 file:///path/to/dist/index.html,并按下回车键来直接运行它。
需要注意的是,因为一些浏览器的安全策略,使用文件协议打开静态文件可能会导致一些限制。有些功能,例如动态导入或XHR请求,可能会受到限制或无法正常工作。
3. 在本地环境运行静态服务器:可以使用一些简单的 Node.js 工具来运行一个本地的静态服务器,例如 http-server 或 live-server。通过在命令行中进入静态文件的目录,然后运行适用于相应工具的命令,即可在浏览器中访问生成的静态文件。这些服务器可以提供更好的性能和功能,以支持动态导入和其他 Web 功能。
总之,Vite 打包后的静态文件可以通过本地服务器、文件协议或本地环境运行的静态服务器来直接运行。具体选择哪种方法取决于需求、浏览器的限制以及实际情况。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)