返回

Vue CLI 3+ 新版本搭建项目中的坑位排查指南

前端

导言

随着 Vue CLI 的不断发展，新版本带来了一些令人兴奋的新功能和改进，同时不可避免地也引入了一些新的挑战。本文旨在帮助开发者解决在使用 Vue CLI 3+ 新版本搭建项目时可能遇到的常见问题，并提供详尽的解决方案。

静态文件读取问题

在 Vue CLI 3+ 中，静态文件（如图像、字体和 CSS 文件）的读取方式发生了改变。以前可以使用 require 或 import 语句直接读取静态文件，但在新版本中需要使用 @ 符号来引用它们。例如：

// 旧写法
import logo from '@/assets/logo.png'

// 新写法
import logo from '@/assets/logo.png?vue'

如果不使用 ?vue 后缀，可能会导致无法正确读取静态文件。

ESLint 配置问题

ESLint 是一个流行的 JavaScript 代码检查工具，Vue CLI 3+ 集成了 ESLint 并默认启用了一些规则。这些规则旨在提高代码质量，但有时可能与开发者的个人偏好或项目需求相冲突。

要修改 ESLint 配置，可以在项目根目录下的 .eslintrc.js 文件中进行调整。这是一个 JSON 文件，可以根据需要覆盖或添加规则。例如，要禁用 no-console 规则，可以添加以下代码：

{
  "rules": {
    "no-console": "off"
  }
}

服务端渲染 (SSR) 问题

SSR 是 Vue CLI 3+ 引入的一项新功能，它允许将 Vue 应用程序渲染到服务器端。虽然 SSR 很有用，但它也可能带来一些额外的复杂性。

一个常见的问题是 SSR 应用程序无法正确读取静态文件。这是因为 SSR 应用程序在服务器端渲染，而静态文件通常存储在客户端。要解决此问题，需要使用 publicPath 选项来指定静态文件的 URL 路径。例如：

// vue.config.js
module.exports = {
  publicPath: '/my-app/'
}

路由问题

在 Vue CLI 3+ 中，路由配置发生了变化。以前使用 vue-router 插件来管理路由，现在路由配置集成到了 Vue CLI 中。

一个常见的问题是路由链接无法正常工作。这是因为在新版本中，需要使用 router-link 组件来创建路由链接。例如：

// 旧写法
<a href="/about">About</a>

// 新写法
<router-link to="/about">About</router-link>

构建问题

在构建 Vue CLI 3+ 应用程序时，可能会遇到各种构建问题。一个常见的问题是构建过程失败，错误消息显示 "Cannot find module 'xxx'"。这是因为构建工具（如 Webpack）无法找到所需的模块。

要解决此问题，需要确保所有依赖项都已安装，并且应用程序的 package.json 文件中指定了正确的路径。此外，还可以在 .babelrc 文件中添加 presets 和 plugins 选项来配置 Babel。

结论

Vue CLI 3+ 是一个强大的工具，可以简化 Vue 应用程序的开发。但是，在使用新版本时可能会遇到一些挑战。本文总结了常见的坑位，并提供了详细的解决方案，旨在帮助开发者快速上手并避免潜在的问题。

请注意，随着 Vue CLI 的不断发展，问题和解决方案可能会发生变化。建议始终查阅官方文档以获取最新信息。