sortablejs vite打包不生效

如果您使用的是Vite打包SortableJS，可能会遇到打包后不生效的问题。这是因为Vite使用ESM（ES Modules）来处理JavaScript模块，而SortableJS使用CommonJS模块，这会导致打包后的代码无法正常运行。

要解决这个问题，可以使用Vite的`vite-plugin-compat`插件，该插件可以将CommonJS模块转换为ESM模块，以便Vite可以正常处理它们。安装`vite-plugin-compat`插件：

npm install vite-plugin-compat --save-dev

然后在`vite.config.js`中添加以下配置：

import compat from 'vite-plugin-compat';

export default {
  plugins: [
    compat({
      // 需要转换为ESM的模块
      // 可以是字符串或者正则表达式
      // 这里以SortableJS为例
      target: 'sortablejs'
    })
  ]
}

这将会把`sortablejs`模块转换为ESM模块，在打包后可以正常使用。

如果您的问题不是这个，请提供更多细节或者错误信息，以便我更好地为您提供帮助。

相关问题

vite 打包不生成dist文件夹

如果你使用 Vite 进行打包却没有生成 `dist` 文件夹的话，可能有以下几个原因：

1. 没有正确配置 `build` 命令

在 `package.json` 文件中，`build` 命令应该被配置为 `vite build`，如下所示：

{
  "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! my-app@0.1.0 build: `vite build`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the my-app@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

那么可能是因为你没有给 `build` 命令执行的权限。你需要在终端中执行以下命令，给 `node_modules/.bin` 目录下的文件加上可执行权限：

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` 文件中添加以下依赖：

{
  "dependencies": {
    "@vitejs/plugin-vue": "^1.8.4"
  }
}

然后在 `vite.config.js` 文件中引入这个插件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue()
  ]
})

以上是我能想到的一些可能的原因，希望能帮到你。

vue vite 打包

Vue 3 中推荐使用 Vite 作为开发服务器和构建工具，因为它具有更快的构建速度和更低的内存占用。以下是使用 Vite 打包 Vue 3 应用的步骤：

1. 安装 Vite：`npm install -g vite`

2. 在项目根目录下创建一个 `build` 目录。

3. 在 `build` 目录下创建一个 `build.js` 文件，然后添加以下代码：

const { build } = require('vite');

build({
  root: `${__dirname}/../`,
  base: './',
  build: {
    outDir: './dist',
    assetsDir: './assets',
    sourcemap: false,
    minify: true,
    rollupOptions: {
      input: './src/main.js',
    },
  },
}).catch((err) => {
  console.error(err);
  process.exit(1);
});

4. 在 `package.json` 文件中添加以下脚本：

{
  "scripts": {
    "build": "node build/build.js"
  }
}

5. 运行 `npm run build` 命令即可打包应用。打包后的文件将位于 `dist` 目录下。

注意：在打包前需要确保项目中已经安装了所有依赖项，并且已经使用 `vue.config.js` 文件配置了应用的相关选项。