Vue+webpack+Element 兼容问题总结(小结)

在Vue、webpack和Element的结合使用过程中，可能会出现兼容性问题，常见的问题包括但不限于CSS样式冲突、ES6语法兼容和loader错误等，本文将对这些问题进行总结和解决。

CSS样式冲突

问题描述

Vue项目中引用Element，而Element中的样式与自己项目中的样式冲突，导致样式显示异常。

解决方法

方法一：自定义主题

在使用Element时，我们可以通过Sass的变量覆盖机制覆盖默认主题样式，从而实现自定义主题。具体实现方法如下：

安装sass-loader和node-sass

npm install sass-loader node-sass --save-dev

新建一个名为element-variables.scss的文件，并添加以下内容：

$--color-primary: #0FB36B;
$--color-primary-hover: #0CA15F;
$--color-success: #67C23A;
$--color-success-hover: #5AA32A;
// 其他变量值

在任意一个样式文件中引入element-variables.scss文件即可：

@import "element-variables.scss";
// 接下来你可以使用上面的变量

方法二：使用命名空间

Vue CLI 3及以上版本提供了CSS modules以及CSS命名空间的功能，我们可以通过它们来避免样式冲突。具体实现方法如下：

在vue.config.js配置文件中添加以下内容:

module.exports = {
  css: {
    loaderOptions: {
      css: {
        // 使用命名空间
        modules: true,
        localIdentName: '[name]-[hash]'
      }
    }
  }
};

在需要使用Element的组件中，通过以下方式引用Element的样式：

<style module>
/* 下面的样式使用了命名空间，不会和当前组件的样式冲突 */
@import "~element-ui/lib/theme-chalk/index.css";
</style>

ES6语法兼容

在使用Vue和webpack时，我们可能会在代码中使用ES6语法，例如使用箭头函数、let和const等新的语法特性。而有些浏览器并不支持这些语法特性，这时候就需要使用babel进行转换，并配置兼容性相关内容。

解决方法

安装相关依赖

需要安装以下依赖：

@babel/core
babel-loader
@babel/preset-env

npm install --save-dev @babel/core babel-loader @babel/preset-env

配置webpack.config.js

在webpack.config.js中进行如下配置：

module.exports = {
  // ...省略其他配置
  module: {
    rules: [
      // 使用babel-loader处理js和jsx文件
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
};

添加.babelrc文件

在项目根目录下添加.babelrc文件，并进行如下配置：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      },
      "useBuiltIns": "usage"
    }]
  ]
}

标记browsers可以告诉babel要兼容的浏览器，useBuiltIns: 'usage'可以让Babel根据目标浏览器引入必要的polyfill。