vue.js - element-ui vue-cli webpack 打包不成功

问题描述

问 题

这是我webpack.base.conf.js 中的内容：

var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        // include: projectRoot,
        exclude: /node_modules/
      },
      { test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: 'file-loader' },
      { test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/, loader: 'file-loader' },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            'scss': 'style-loader!css-loader!sass-loader'
          }
        }
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      }
    ]
  }
}

这是我main.js 入口文件引用的 element-ui :

...
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
...
Vue.use(ElementUI)
...

这是我 package.json 中的依赖:

...
"dependencies": {
    "axios": "^0.16.1",
    "element-ui": "^1.2.8",
    "moment": "^2.18.1",
    "vue": "^2.2.6",
    "vue-html5-editor": "^1.1.1",
    "vue-quill-editor": "^2.1.6",
    "vue-router": "^2.4.0",
    "vuex": "^2.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.0",
    "less": "^2.7.2",
    "less-loader": "^4.0.3",
    "file-loader": "^0.8.5",
    "node-sass": "^4.5.2",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.16.1",
    "vue-loader": "^11.3.4",
    "vue-template-compiler": "^2.2.6",
    "webpack": "^2.3.3",
    "webpack-dev-middleware": "^1.10.1",
    "webpack-hot-middleware": "^2.18.0",
    "swiper": "^3.4.2",
    "express": "^4.15.2",
    "autoprefixer": "^7.1.2",
    "chalk": "^2.0.1",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "cssnano": "^3.10.0",
    "eventsource-polyfill": "^0.9.6",
    "extract-text-webpack-plugin": "^2.0.0",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "webpack-bundle-analyzer": "^2.2.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "opn": "^5.1.0",
    "optimize-css-assets-webpack-plugin": "^2.0.0",
    "ora": "^1.2.0",
    "rimraf": "^2.6.0",
    "url-loader": "^0.5.8",
    "vue-style-loader": "^3.0.1",
    "webpack-merge": "^4.1.0"
  },
...

打包的时候控制台报错：

剩下的四个错也都是类似 css 文件打包错误，
让我很蛋疼，明明都按照教程来的了，webpack 详解，vue-cli 详解也看了好多文章，就是找不出哪里出了问题。

求各位大哥大姐，前辈帮帮忙，小弟这里先谢过

解决方案

import 'element-ui/lib/theme-default/index.css'去掉呢

这篇关于vue.js - element-ui vue-cli webpack 打包不成功的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！