Vue工具链踩坑

13.1 Vue CLI的常见错误

核心知识点

• Vue CLI的安装和配置
• Vue CLI命令的使用
• Vue CLI插件的管理

常见错误场景

错误场景1：Vue CLI安装错误

# 错误：使用了错误的安装命令
npm install vue-cli -g

错误原因：使用了旧版本的安装命令，Vue CLI 3+应该使用@vue/cli。

正确实现：

# 正确：使用正确的安装命令
npm install @vue/cli -g

错误场景2：Vue CLI命令使用错误

# 错误：使用了旧版本的命令
vue init webpack my-project

错误原因：使用了旧版本的命令，Vue CLI 3+应该使用vue create。

正确实现：

# 正确：使用正确的命令
vue create my-project

13.2 Vue项目创建的陷阱

核心知识点

• Vue项目的创建流程
• 项目模板的选择
• 项目配置的优化

常见错误场景

错误场景1：项目模板选择错误

# 错误：选择了不适合的项目模板
vue create my-project
# 选择了Manually select features，但没有选择需要的功能

错误原因：项目模板选择错误，导致项目缺少必要的功能。

正确实现：

# 正确：选择适合的项目模板
vue create my-project
# 选择Manually select features，然后选择需要的功能

错误场景2：项目配置错误

// package.json
{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    // 错误：配置了不存在的脚本
    "test": "jest"
  }
}

错误原因：项目配置错误，配置了不存在的脚本或依赖。

正确实现：

// package.json
{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test": "vue-cli-service test:unit"
  }
}

13.3 Vue插件安装的使用误区

核心知识点

• Vue插件的安装方法
• 插件的配置和使用
• 插件的版本兼容性

常见错误场景

错误场景1：插件安装命令错误

# 错误：使用了错误的插件安装命令
npm install vue-router

错误原因：使用了错误的插件安装命令，Vue CLI插件应该使用vue add命令。

正确实现：

# 正确：使用正确的插件安装命令
vue add router

错误场景2：插件版本不兼容

# 错误：安装了不兼容的插件版本
npm install vue-router@3.0.0

错误原因：安装了不兼容的插件版本，Vue 3需要使用Vue Router 4。

正确实现：

# 正确：安装兼容的插件版本
npm install vue-router@4.0.0

13.4 Vue构建工具的配置问题

核心知识点

• Vue构建工具的配置
• webpack配置的优化
• 构建性能的提升

常见错误场景

错误场景1：webpack配置过于复杂

// vue.config.js
module.exports = {
  configureWebpack: {
    // 错误：配置过于复杂，难以维护
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        }
      ]
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify(process.env.NODE_ENV)
        }
      })
    ]
  }
}

错误原因：webpack配置过于复杂，难以维护和调试。

正确实现：

// vue.config.js
module.exports = {
  configureWebpack: {
    // 正确：使用简洁的配置
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
}

错误场景2：构建性能优化不当

// vue.config.js
module.exports = {
  // 错误：没有配置构建性能优化
}

错误原因：没有配置构建性能优化，导致构建速度过慢。

正确实现：

// vue.config.js
module.exports = {
  // 正确：配置构建性能优化
  parallel: require('os').cpus().length > 1,
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all'
      }
    }
  }
}

13.5 Vue代码规范的陷阱

核心知识点

• Vue代码规范的配置
• ESLint的使用
• Prettier的集成

常见错误场景

错误场景1：ESLint配置错误

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  // 错误：配置了不存在的规则
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'vue/no-unused-components': 'error',
    'vue/no-unused-vars': 'error'
  }
}

错误原因：ESLint配置错误，配置了不存在的规则或规则冲突。

正确实现：

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/standard'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

错误场景2：Prettier集成错误

// .prettierrc.js
{
  "semi": false,
  "singleQuote": true,
  // 错误：与ESLint配置冲突
  "tabWidth": 2,
  "trailingComma": "es5"
}

错误原因：Prettier配置与ESLint配置冲突，导致代码格式化错误。

正确实现：

// .prettierrc.js
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/standard',
    '@vue/prettier'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

13.6 Vue开发服务器的常见问题

核心知识点

• Vue开发服务器的配置
• 开发服务器的优化
• 开发环境的调试

常见错误场景

错误场景1：开发服务器端口冲突

# 错误：开发服务器端口冲突
npm run serve
# 输出：Error: listen EADDRINUSE: address already in use :::8080

错误原因：开发服务器端口冲突，8080端口已被占用。

正确实现：

// vue.config.js
module.exports = {
  // 正确：配置不同的端口
  devServer: {
    port: 8081
  }
}

错误场景2：开发服务器配置错误

// vue.config.js
module.exports = {
  devServer: {
    // 错误：配置了不存在的选项
    hotOnly: true,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}

错误原因：开发服务器配置错误，配置了不存在的选项或配置格式错误。

正确实现：

// vue.config.js
module.exports = {
  devServer: {
    hot: true,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}

13.7 Vue热更新的使用误区

核心知识点

• Vue热更新的原理
• 热更新的配置和使用
• 热更新的常见问题

常见错误场景

错误场景1：热更新配置错误

// vue.config.js
module.exports = {
  devServer: {
    // 错误：热更新配置错误
    hot: false
  }
}

错误原因：热更新配置错误，导致热更新功能无法正常工作。

正确实现：

// vue.config.js
module.exports = {
  devServer: {
    // 正确：启用热更新
    hot: true
  }
}

错误场景2：热更新不生效

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  }
}
</script>

错误原因：热更新不生效可能是由于文件保存方式或编辑器配置问题。

正确实现：

// vue.config.js
module.exports = {
  devServer: {
    hot: true,
    watchOptions: {
      poll: true
    }
  }
}

13.8 Vue代码分割的陷阱

核心知识点

• Vue代码分割的原理
• 代码分割的配置和使用
• 代码分割的优化策略

常见错误场景

错误场景1：代码分割配置错误

// vue.config.js
module.exports = {
  configureWebpack: {
    optimization: {
      // 错误：代码分割配置错误
      splitChunks: {
        chunks: 'all',
        maxSize: 200000
      }
    }
  }
}

错误原因：代码分割配置错误，可能导致打包体积过大或过小。

正确实现：

// vue.config.js
module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        maxSize: 244000
      }
    }
  }
}

错误场景2：路由懒加载使用错误

// router/index.js
// 错误：路由懒加载使用错误
const Home = import('@/views/Home.vue')
const About = import('@/views/About.vue')

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

错误原因：路由懒加载使用错误，import应该返回一个函数。

正确实现：

// router/index.js
// 正确：路由懒加载使用正确
const Home = () => import('@/views/Home.vue')
const About = () => import('@/views/About.vue')

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]