Vue CLI Service实战：你真的会用了吗？

Vue CLI Service实战：你真的会用了吗？

引用

CSDN

等

12

来源

1.

https://blog.csdn.net/2401_85013357/article/details/138829687

2.

https://blog.csdn.net/AF7593/article/details/116834766

3.

https://blog.csdn.net/Hemameba/article/details/132206097

4.

https://blog.csdn.net/qiwoo_weekly/article/details/137802005

5.

https://cloud.baidu.com/article/3298047

6.

https://github.com/any86/Notes/blob/master/%E8%AE%A9%E8%80%81vue-cli%E5%BC%80%E5%90%AF%E6%96%B0%F0%9F%9A%80es%E8%AF%AD%E6%B3%95%E6%94%AF%E6%8C%81%2C%20%E6%AF%94%E5%A6%82%E5%8F%AF%E9%80%89%E9%93%BE.md

7.

https://blog.csdn.net/shannash/article/details/140691872

8.

https://wenku.csdn.net/answer/6ma97b9f4g

9.

https://cli.vuejs.ac.cn/guide/cli-service

10.

https://www.cnblogs.com/moqiutao/p/18409493

11.

https://cli.vuejs.ac.cn/guide/plugins-and-presets

12.

https://www.cnblogs.com/j-a-h/p/18084502

Vue CLI Service是Vue.js开发中的核心工具，它不仅简化了项目的初始化、开发、构建和部署流程，还提供了丰富的插件和支持。然而，你真的掌握了它的全部潜力吗？本文将深入探讨Vue CLI Service的最佳实践，分享实用技巧和常见误区，帮助你全面提升开发效率和项目质量。无论是初学者还是资深开发者，都能从中获得新的启发和收获。快来一起探索吧！

Vue CLI Service是Vue CLI的一部分，它提供了许多开箱即用的功能，包括开发服务器、构建工具和插件支持。在Vue CLI项目中，@vue/cli-service安装了一个名为vue-cli-service的二进制文件。你可以在npm脚本中直接访问该二进制文件，方法是vue-cli-service，或者从终端访问./node_modules/.bin/vue-cli-service。

这是使用默认预设的项目package.json中的内容：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

你可以使用npm或Yarn调用这些脚本：

npm run serve
# OR
yarn serve

如果你有npx可用（应该与最新版本的npm捆绑在一起），你也可以直接使用以下命令调用二进制文件：

npx vue-cli-service serve

在使用Vue CLI Service的过程中，开发者经常会遇到一些问题。以下是一些常见的问题及其解决方案：

1. 'vue-cli-service'不是内部或外部命令

这个问题通常发生在Vue CLI没有正确安装或环境变量没有配置好的情况下。解决方法包括：

• 确保Vue CLI已全局安装：

  npm install -g @vue/cli
  

• 在项目中本地安装Vue CLI服务插件：

  npm install @vue/cli-service --save-dev
  

• 检查Vue CLI的安装路径是否已添加到系统的PATH环境变量中。

2. 权限问题

如果在运行npm run serve时遇到权限错误，可以尝试以下解决方案：

• 进入node_modules/.bin/目录：

  cd node_modules/.bin/
  

• 执行赋权限指令：

  chmod 777 vue-cli-service
  

3. 依赖缺失

如果项目依赖丢失，可能会导致vue-cli-service无法识别。解决方法是：

1. 进入你的项目目录

2. 找到并删除node_modules文件夹

3. 运行以下命令：

   npm install
   

4. 安装完成后重新运行项目

环境变量管理

Vue CLI 4支持多种环境变量文件，包括：

• .env：默认的环境变量文件，在所有环境中都可用。
• .env.[mode]：特定模式的环境变量文件，只在指定的模式中使用。例如，.env.development只在开发模式中使用。
• .env.[mode].local：特定模式的本地环境变量文件，只在指定的模式中使用，并且会被.gitignore忽略，适合存储敏感信息。

在Vue CLI 4中，我们可以通过process.env对象来访问环境变量。例如，如果我们在.env文件中定义了一个名为VUE_APP_TITLE的环境变量，那么我们可以在代码中通过process.env.VUE_APP_TITLE来访问它。

需要注意的是，只有以VUE_APP_开头的环境变量才会被webpack.DefinePlugin静态地嵌入到客户端侧的代码中。这是为了避免意外地将可能敏感的变量泄露到客户端。

分环境打包

分环境打包是指根据不同的环境配置，生成对应环境的构建产物。Vue CLI 4通过命令行参数--mode来指定打包模式，从而实现分环境打包。

例如，如果我们想要为生产环境打包，可以在命令行中执行以下命令：

vue-cli-service build --mode production

这将会根据.env.production文件中的环境变量配置，生成生产环境的构建产物。

除了--mode参数，我们还可以在vue.config.js文件中配置configureWebpack选项，根据不同的模式调整webpack的配置。这样，我们可以根据不同的环境需求，定制构建产物的行为。

在实际开发中，建议将环境变量按照敏感程度进行分类管理。对于非敏感的环境变量，可以直接在.env文件中定义；对于敏感的环境变量，如数据库连接字符串、API密钥等，建议存储在安全的位置，如环境变量管理系统或秘密管理工具中，并在.env.local文件中通过引用这些安全位置的值来定义。

此外，建议在vue.config.js文件中对构建产物进行必要的优化和配置，如压缩代码、设置公共路径、配置代理等，以满足不同环境的需求。

总结：通过合理使用环境变量和分环境打包，我们可以更加灵活地管理和部署Vue CLI 4应用。在实际开发中，我们应该根据项目的需求和环境的特点，选择合适的环境变量管理策略，并结合vue.config.js文件对构建产物进行必要的配置和优化。这样，我们才能确保应用在不同环境下都能正常运行，并满足用户的需求。

为了更好地理解Vue CLI Service的使用，让我们通过一个具体的案例来展示其在实际项目中的应用。

假设我们正在开发一个需要在多个环境中部署的Vue.js应用，包括开发环境、测试环境和生产环境。我们需要为每个环境配置不同的API端点和一些其他设置。

1. 首先，我们在项目根目录下创建以下环境变量文件：

   • .env.development：

     VUE_APP_API_URL=http://localhost:3000
     

   • .env.test：

     VUE_APP_API_URL=http://test-api.example.com
     

   • .env.production：

     VUE_APP_API_URL=http://api.example.com
     

2. 在代码中，我们可以通过process.env.VUE_APP_API_URL来访问这些环境变量：

   const apiUrl = process.env.VUE_APP_API_URL;
   

3. 当我们需要为不同环境打包时，可以使用以下命令：

   • 开发环境：

     vue-cli-service build --mode development
     

   • 测试环境：

     vue-cli-service build --mode test
     

   • 生产环境：

     vue-cli-service build --mode production
     

通过这种方式，我们可以轻松地为不同环境生成相应的构建产物，而无需修改代码。

Vue CLI Service是一个功能强大且灵活的工具，它能够显著提升Vue.js项目的开发效率和部署便利性。通过掌握其基本命令、高级特性和最佳实践，开发者可以更好地利用Vue CLI Service，为项目开发和部署带来更多的便利和效率提升。