WebStorm 怎么编译 Vue 工程

最近一些工程项目，需要用到Vue，只能从头学一下。

目前使用的WebStorm，但是不知道怎么编译，还要下载Node.js，对这个不熟悉。

最终找到了编译方法：记录一下

1. 打包方法

1.1 在工程里面，package.json，点击右键，选择 显示npm脚本。然后点击build

1.2 菜单 --> 视图 --> 工具窗口 --> npm , 然后点击build

 

 

2. 命令说明

打开 package.json，内容如下

{
  // 省略代码 ……
  "scripts": {
    "dev": "vite",              // 启动开发服务器，别名：`vite dev`，`vite serve`
    "build": "vite build",      // 为生产环境构建产物
    "preview": "vite preview"   // 本地预览生产构建产物
  },
  // 省略代码 ……
}

可以看到，build 实际执行的命令是 vite build

同样，也可以再这里加入其他的一些自定义命令

 

3. vite 常用命令说明

3.1 直接执行 vite

在当前目录下启动 Vite 开发服务器。vite dev 和 vite serve 是 vite 的别名。

 

选项
--host [host]	指定主机名称 (string)
--port <port>	指定端口 (number)
--open [path]	启动时打开浏览器 (boolean | string)
--cors	启用 CORS (boolean)
--strictPort	如果指定的端口已在使用中，则退出 (boolean)
--force	强制优化器忽略缓存并重新构建 (boolean)
-c, --config <file>	使用指定的配置文件 (string)
--base <path>	公共基础路径（默认为：/）(string)
-l, --logLevel <level>	info | warn | error | silent (string)
--clearScreen	允许或禁用打印日志时清除屏幕 (boolean)
--profile	启动内置的 Node.js 调试器
-d, --debug [feat]	显示调试日志 (string | boolean)
-f, --filter <filter>	过滤调试日志 (string)
-m, --mode <mode>	设置环境模式 (string)
-h, --help	显示可用的 CLI 选项
-v, --version	显示版本号

 

3.2 vite build

构建生产版本。

选项
--target <target>	编译目标（默认为："modules"）(string)
--outDir <dir>	输出目录（默认为：dist）(string)
--assetsDir <dir>	在输出目录下放置资源的目录（默认为："assets"）(string)
--assetsInlineLimit <number>	静态资源内联为 base64 编码的阈值，以字节为单位（默认为：4096）(number)
--ssr [entry]	为服务端渲染配置指定入口文件 (string)
--sourcemap [output]	构建后输出 source map 文件（默认为：false）(boolean | "inline" | "hidden")
--minify [minifier]	允许或禁用最小化混淆，或指定使用哪种混淆器（默认为："esbuild"）(boolean | "terser" | "esbuild")
--manifest [name]	构建后生成 manifest.json 文件 (boolean | string)
--ssrManifest [name]	构建后生成 SSR manifest.json 文件 (boolean | string)
--emptyOutDir	若输出目录在根目录外，强制清空输出目录 (boolean)
-w, --watch	在磁盘中模块发生变化时，重新构建 (boolean)
-c, --config <file>	使用指定的配置文件 (string)
--base <path>	公共基础路径（默认为：/）(string)
-l, --logLevel <level>	Info | warn | error | silent (string)
--clearScreen	允许或禁用打印日志时清除屏幕 (boolean)
--profile	启动内置的 Node.js 调试器
-d, --debug [feat]	显示调试日志 (string | boolean)
-f, --filter <filter>	过滤调试日志 (string)
-m, --mode <mode>	设置环境模式 (string)
-h, --help	显示可用的 CLI 选项

3.3 vite optimize

预构建依赖。

 

选项
--force	强制优化器忽略缓存并重新构建 (boolean)
-c, --config <file>	使用指定的配置文件 (string)
--base <path>	公共基础路径（默认为：/）(string)
-l, --logLevel <level>	Info | warn | error | silent (string)
--clearScreen	允许或禁用打印日志时清除屏幕 (boolean)
-d, --debug [feat]	显示调试日志 (string | boolean)
-f, --filter <filter>	过滤调试日志 (string)
-m, --mode <mode>	设置环境模式 (string)
-h, --help	显示可用的 CLI 选项

3.4 vite preview

本地预览构建产物。不要将其用作生产服务器，因为它不是为此而设计的。

 

选项
--host [host]	指定主机名称 (string)
--port <port>	指定端口 (number)
--strictPort	如果指定的端口已在使用中，则退出 (boolean)
--open [path]	启动时打开浏览器 (boolean | string)
--outDir <dir>	输出目录（默认为：dist)(string)
-c, --config <file>	使用指定的配置文件 (string)
--base <path>	公共基础路径（默认为：/）(string)
-l, --logLevel <level>	Info | warn | error | silent (string)
--clearScreen	允许或禁用打印日志时清除屏幕 (boolean)
-d, --debug [feat]	显示调试日志 (string | boolean)
-f, --filter <filter>	过滤调试日志 (string)
-m, --mode <mode>	设置环境模式 (string)
-h, --help	显示可用的 CLI 选项

3.5 vite inspect

查看 Vite 项目的配置和依赖信息。
输出：显示当前项目的 Vite 配置信息以及依赖项的版本信息。

 

3.6 vite upgrade：

升级当前项目中的 Vite 版本。
输出：检查可用的 Vite 版本，并提示是否进行升级。若确认升级，则将当前项目中的 Vite 包更新到最新版本。

 

3.7 vite create <project-name>

创建新的 Vite 项目，可以选择使用预设模板。
输出：根据指定的项目名称创建新的项目文件夹，并初始化一个 Vite 项目。

 

 

四、参考链接：

1. https://blog.csdn.net/weixin_40760196/article/details/79952652/

2. https://vitejs.dev/

3. https://cn.vitejs.dev/guide/