Wasm项目执行cargo build未生成pkg目录的问题求助

我来帮你捋清楚这个问题——你现在用cargo build --target wasm-unknown-unknown直接编译是不会自动生成pkg目录的，这个目录是**wasm-pack工具**的专属产物，而不是cargo build本身的功能哦！结合你的配置，给你几个具体的解决步骤：

1. 先确认是否安装了wasm-pack #

首先打开终端执行：

wasm-pack --version

如果提示命令不存在，说明你还没安装这个工具，用cargo安装即可：

cargo install wasm-pack

2. 用正确的命令生成pkg目录 #

放弃直接用cargo build，改用wasm-pack的编译命令：

# 基础编译，默认生成适用于Node.js/bundler的产物
wasm-pack build

# 如果是要在浏览器环境直接用，加上--target web参数
wasm-pack build --target web

wasm-pack会自动调用cargo编译Wasm目标，然后通过wasm-bindgen生成对应的JS绑定代码，最后把所有产物打包到pkg目录里，这时候你就能在index.js里正常导入./pkg/rust_3d_demo了。

3. 检查Webpack插件的配置（针对你的开发环境） #

你已经配置了@wasm-tool/wasm-pack-plugin，这个插件的作用是在Webpack构建时自动调用wasm-pack，所以如果你是通过webpack-dev-server启动项目的话，其实不需要手动生成pkg目录，但要确保插件配置正确。比如你的webpack.config.js里应该有类似这样的配置：

const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [
    new WasmPackPlugin({
      // 指定你的rust项目根目录（就是有Cargo.toml的那个目录）
      crateDirectory: path.resolve(__dirname, '.'),
      // 可以指定target，比如'web'
      // extraArgs: '--target web'
    }),
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ],
  mode: 'development'
};

配置正确的话，启动webpack-dev-server时插件会自动生成pkg目录并处理导入。

4. 版本兼容性小检查 #

你提到rust工具链都是最新的，但wasm-pack和wasm-bindgen的版本需要兼容。你的Cargo.toml里wasm-bindgen是0.2.44，如果安装最新版wasm-pack出现兼容问题，可以指定对应版本安装：

cargo install wasm-pack --version 0.9.1

这个版本和0.2.44的wasm-bindgen是匹配的。

最后再确认下：所有命令都要在你的rust项目根目录（有Cargo.toml的那个文件夹）下执行哦！

内容的提问来源于stack exchange，提问作者Joey Vico