详解vue-cli 构建Vue项目遇到的坑

简介

vue-cli是Vue.js官方提供的一款构建工具，可以快速创建单页应用或组件库，提供webpack打包、ES6转译、热更新等功能，可以大大减轻开发者的工作量。然而，使用vue-cli创建项目时，也会遇到各种坑，这里将对一些常见的问题进行详解。

坑1：vue-cli3无法预览组件库

使用vue-cli3创建组件库时，如果直接运行npm run serve，会发现组件库无法预览，只有空白的页面。这是由于vue-cli3默认只打包了应用程序入口文件，而组件库主要提供的是组件，所以需要修改webpack的配置。

首先，安装vue-cli-service插件：

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

然后，在package.json文件中，添加如下内容：

{
  "main": "dist/index.js",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "vue-cli-service build --target lib --name my-lib src/main.js",
    "serve": "vue-cli-service serve --open"
  },
  "peerDependencies": {
    "vue": "^2.5.0"
  }
}

修改webpack的配置，使其能够直接预览组件库：

module.exports = {
  configureWebpack: {
    output: {
      libraryExport: 'default'
    },
    externals: {
      vue: 'vue',
      'element-ui': 'element-ui',
      'vant': 'vant'
    },
    plugins: [
      new VueLoaderPlugin()
    ]
  },
  css: {
    extract: false
  }
}

最后运行npm run serve即可预览组件库。

坑2：Vue组件中的CSS不起作用

在Vue组件中，由于CSS样式是使用scoped修饰符包裹的，因此有时候会发现组件中的CSS样式不起作用。这是由于系统主题覆盖了组件中的CSS，需要使用/deep/或>>>修饰符才能使CSS样式生效。

例如，在以下组件中，按钮的样式无法生效：

<template>
  <div>
    <button class="my-button">按钮</button>
  </div>
</template>

<style>
  .my-button {
    background-color: red;
    color: #fff;
  }
</style>

需要在样式中使用/deep/或>>>修饰符才能生效：

<template>
  <div>
    <button class="my-button">按钮</button>
  </div>
</template>

<style scoped>
  /deep/ .my-button {
    background-color: red;
    color: #fff;
  }
</style>

示例说明

示例1：创建Vue项目时，无法安装依赖包

当使用vue-cli创建Vue项目时，有时候会出现安装依赖包失败的情况，例如：

npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm ERR! cb() never called!

npm ERR! This is an error with npm itself. Please report this error at:
npm ERR!     <https://npm.community>
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/qiushuangying/.npm/_logs/2018-08-08T07_40_05_173Z-debug.log

这是由于npm的版本不兼容造成的，解决方法是升级npm的版本：

npm install npm@latest -g

然后再重新创建项目即可。

示例2：引入第三方组件库后，页面样式错乱

当使用第三方组件库，例如Element-UI、Vant等，引入页面后，有时候会发现原本正常的页面样式变得错乱。

这是由于第三方组件库的样式与当前系统主题不兼容，需要在main.js文件中修改全局样式：

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

import './assets/my-styles.css'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

在my-styles.css文件中，可以覆盖第三方组件库的样式，例如：

.el-button {
  color: #fff;
  background-color: #409EFF;
  border-color: #409EFF;
}