英文:
Vite add assets path prefix / change assets path in compiled files
问题
请问，如何仅更改已编译文件的 Vite 资源路径构建？例如，我有一个名为 index.html 的文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<script type="module" src="/src/main.js"></script>
</body>
</html>
在这里，我有一个带有 src="/src/main.js" 的脚本标签。当我编译它时，得到了 src="/assets/index-c371877d.js"。
我正在制作 ESP32 web 服务器，由于一些内部原因，我需要将编译后的文件放在另一个文件夹中，即 SD 卡。
我可以通过 vite.config.js 更改输出目录，如下所示：
export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
build: {
outDir: "../../SD/modules/test", // test 是项目名称
},
})
但问题是，编译后的文件具有相同的相对路径，而我需要拥有 modules/%moduleName%/%relative path%。因此，我需要的是 src="module/test/assets/index-c371877d.js" 而不是 src="/assets/index-c371877d.js"。
我尝试更改 Vite 的 assetsDir 如下：
export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
build: {
outDir: "../../SD/modules/test",
assetsDir: "modules/test"
}
})
现在它在路径之前添加了 modules/test，但编译后的文件被放入 outDir + assetsDir 目录中，这不是我想要的。
请告诉我，如何在不更改真正的资产目录的情况下，只是添加所需的路径数据前缀？非常感谢。
英文:
Could you tell me please, how to change how vite assets path is built, but only for compiled files?
I mean, for example, I have file index.html like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<script type="module" src="/src/main.js"></script>
</body>
</html>
and here I have script with src="/src/main.js"
When I compile it, I get src="/assets/index-c371877d.js"
I am making ESP32 webserver, and because of some internal moments I need to put compiled files in another folder, on SD card.
I can change output directory using vite.config.js, here I have:
export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
build: {
outDir: "../../SD/modules/test", // test is project name
},
})
But the problem is, that compiled files have same relative path, while I need to have modules/%moduleName%/%relative path%<br/>
So instead of src="/assets/index-c371877d.js" I need src="module/test/assets/index-c371877d.js"
I tried to change vite assetsDir:
export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
build: {
outDir: "../../SD/modules/test",
assetsDir: "modules/test"
})
Now it adds modules/test before path, but compiled files are put into outDir + assetsDir directory, what I don't want.
Tell me please, how could I just prepend necessary path data without changing real assets directory? Thank you in advance.
答案1
得分: 2
问题已解决，最终的解决方案如下：
export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
build: {
outDir: Config.modulesDirRelativePath + "/vue-project"
},
base: "/modules/vue-project"
})
英文:
Solved, finally.
It was needed to provide base property for config
export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
build: {
outDir: Config.modulesDirRelativePath + "/vue-project"
},
base: "/modules/vue-project"
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论