在Vite中更改输入和输出目录
在Vite中更改输入和输出目录
提问于 2021-03-30 08:09:58
我使用Vite (https://vitejs.dev/)作为静态多页面站点。这是build命令之后的默认项目文件夹结构。
my-app/
├─ node_modules/
├─ dist/
│ ├─ assets/
│ ├─ index.html
├─ index.html
├─ main.js
├─ style.scss
├─ package.json但我想让它成为一个多页面站点，并更改输入和输出目录，以获得更好的组织方式，如下所示
my-app/
├─ node_modules/
├─ package.json
├─ src/
│ ├─ about.html
│ ├─ index.html
│ ├─ main.js
│ ├─ style.scss
├─ dist/
│ ├─ assets/
│ ├─ about.html
│ ├─ index.html基本上，它应该将'src‘作为输入文件夹，并将'dist’作为'my-app‘的子级输出。当我尝试这样做时，它显示错误，然后我将package.json的脚本更改为
"scripts": {
"dev": "vite src",
"build": "vite build src",
"serve": "vite preview"
},这样，“dev”命令就可以很好地工作。但是'build‘命令将dist文件夹放在src文件夹中，并且不会生成除index.html之外的其他HTML文件
现在我该如何解决这个问题呢？有什么建议吗？
回答 4
Stack Overflow用户
发布于 2021-03-30 16:51:03
创建一个vite.config.js文件并按如下方式定义项目根目录和输出目录：
module.exports = {
root: 'src',
build: {
outDir: '../dist'
}
}有关更多信息，请查看config。
Stack Overflow用户
发布于 2021-09-22 08:05:37
当你想在你的vite.config.ts中使用defineConfig时，你可以这样使用它：
import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import eslintPlugin from 'vite-plugin-eslint'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [reactRefresh(), eslintPlugin({ cache: false })],
root: 'src',
build: {
outDir: '../dist'
}
})Stack Overflow用户
发布于 2021-03-31 04:00:19
对于multipage，您需要指定每个入口点。详细信息here。对于动态指定src/目录中的所有.html文件作为入口点，您可以这样设置您的vite.config.js：
import path from "path";
import glob from "glob";
export default {
root: path.join(__dirname, "src"),
build: {
outDir: path.join(__dirname, "dist"),
rollupOptions: {
input: glob.sync(path.resolve(__dirname, "src", "*.html")),
},
},
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66863200
复制相关文章
相似问题
腾讯云开发者
