介绍
在使用 Vue.js 开发项目时，我们经常需要使用到各种各样的工具来构建、调试和部署项目。其中一个非常重要的工具就是 @vue/cli-service。
@vue/cli-service 是一个基于 webpack 封装而成的命令行工具，可以帮助我们完成项目的编译、热重载、代码压缩、打包和部署等任务。此外，它还提供了一些实用的功能和插件，比如单元测试、代码检查、样式预处理器、PWA 支持等。
本文将详细讲解如何使用 @vue/cli-service 来进行 Vue.js 项目的开发和部署。我们将介绍不同的配置项和命令，以及如何使用插件来优化项目的开发体验和性能。
安装和命令行工具
首先，我们需要在项目中安装 @vue/cli-service。你可以使用以下命令进行安装：
npm install @vue/cli-service --save-dev
安装完成后，你可以使用 vue-cli-service 命令来调用该工具。例如，以下命令将启动一个本地的开发服务器，并在浏览器中打开项目页面：
npm run serve在开发过程中，你还可以使用其他命令来完成不同的任务，比如：
npm run build用于构建和打包项目npm run test:unit用于执行单元测试npm run lint用于执行代码检查npm run inspect用于查看 webpack 的配置信息
配置
@vue/cli-service 提供了一些默认的配置，可以满足大部分项目的需求。但是，在一些复杂的应用场景中，你可能需要自定义一些配置。以下是一些值得注意的配置项：
publicPath
默认情况下，publicPath 的值为空字符串，表示使用相对路径。在生产环境中，你可能需要修改 publicPath 的值，以便让静态资源能够正确地加载。比如，如果你的网站部署在 https://www.example.com/myapp/ 下，那么你需要把 publicPath 的值设置为 /myapp/
// vue.config.js module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/myapp/' : '/' }
outputDir
outputDir 表示打包后文件的输出目录。默认情况下，该目录在项目根目录下的 dist 文件夹中。你可以使用以下配置来修改该目录：
// vue.config.js module.exports = { outputDir: 'my-dist-folder' }
chainWebpack
chainWebpack 允许你在 webpack 的构建过程中，修改默认配置。通过它，你可以添加自定义的 loader、plugin、alias 等。
-- -------------------- ---- ------- -- ------------- -------------- - - ------------- ------ -- - ------------- ---------------- ------------------- -------------------------- ----------------------------- ------ - -展开代码
devServer
devServer 是用于开发环境的服务器配置。它可以帮助你实现热重载、代理请求、https 等功能。以下是一些常用的配置项：
-- -------------------- ---- ------- -- ------------- -------------- - - ---------- - ----- ------------ ----- ----- ------ ------ ----- ----- ------ - ------- - ------- ------------------------ ------------ - -------- -- - - - - -展开代码
plugins
plugins 是用于添加插件的数组配置。插件可以用于增强开发体验或优化性能。Vue.js 团队已经为我们提供了一些常用的插件，比如 @vue/cli-plugin-eslint、@vue/cli-plugin-unit-jest 等。
安装插件后，你需要在 vue.config.js 中使用 configureWebpack 来添加插件到 webpack 的配置中：
-- -------------------- ---- ------- -- ------------- -------------- - - ----------------- - -------- - --- ------------------ --- ------------------- - - -展开代码
总结
通过本文，我们已经了解了 @vue/cli-service 的基本使用和常见配置项。对于大部分的 Vue.js 项目来说，使用默认配置就已经足够了。但是，对于一些需要自定义配置的场景，我们也提供了一些实用的配置项和方法。
在实际开发过程中，我们还可以使用各种插件来增强工具链的功能，提高开发效率和代码质量。因此，建议大家尝试使用一些常用的插件，并根据实际需求进行调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/108483
