vite打包配置|资源分类打包

把vite打包以后的js,css和img资源分别分门别类在js/css/img文件夹中:

//由于是处理打包以后的资源,所以需要配置build选项
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      resolves: [VantResolve()]
    })
  ],
  resolve: {
    alias: [
      { find: '@', replacement: resolve(__dirname, 'src') }
    ]
  },
  build: {
    assetsDir: 'static',
    rollupOptions: {
      input: {
        index: resolve(__dirname, 'index.html'),
        project:resolve(__dirname,"project.html")
      },
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/name-[hash].[ext]'
      }
    }
  }
})

配置完成后打包:npm run build 发现出错:

Could not resolve entry module (project.html).
error during build:
Error: Could not resolve entry module (project.html).

 把build配置项的input第二项删去即可。

rollupOptions: {
      input: {
        index: resolve(__dirname, 'index.html')
      },
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/name-[hash].[ext]'
      }
    }

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你使用 Vite 进行打包却没有生成 `dist` 文件夹的话,可能有以下几个原因: 1. 没有正确配置 `build` 命令 在 `package.json` 文件中,`build` 命令应该被配置为 `vite build`,如下所示: ```json { "scripts": { "build": "vite build" } } ``` 2. build 执行时没有权限 如果你在执行 `npm run build` 命令时,遇到了类似下面这样的错误: ``` sh: 1: vite: not found npm ERR! code ELIFECYCLE npm ERR! syscall spawn npm ERR! file sh npm ERR! errno ENOENT npm ERR! [email protected] build: `vite build` npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the [email protected] build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. ``` 那么可能是因为你没有给 `build` 命令执行的权限。你需要在终端中执行以下命令,给 `node_modules/.bin` 目录下的文件加上可执行权限: ```bash chmod -R +x node_modules/.bin ``` 3. 缺少 `build` 插件 在 Vite 中,`build` 命令需要使用 `@vitejs/plugin-vue` 或 `@vitejs/plugin-react` 等插件。如果你没有安装这些插件,则在执行 `npm run build` 命令时,会提示以下错误: ``` error [vite] Plugin not found: /path/to/project/node_modules/@vitejs/plugin-vue/index.js ``` 你需要在 `package.json` 文件中添加以下依赖: ```json { "dependencies": { "@vitejs/plugin-vue": "^1.8.4" } } ``` 然后在 `vite.config.js` 文件中引入这个插件: ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [ vue() ] }) ``` 以上是我能想到的一些可能的原因,希望能帮到你。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值