webpack打包el-table数据不渲染问题

木心操作

已于 2022-11-24 19:13:57 修改

阅读量1k

点赞数

分类专栏： webpack 文章标签： webpack vue.js javascript

于 2022-11-24 19:13:30 首次发布

本文链接：https://blog.csdn.net/qq_41579327/article/details/128024629

版权

webpack 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在 webpack.config.js 配置文件添加解析器 resolve

// 解决element-ui  el-table 数据不渲染问题
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': path.resolve('./node_modules'),
      vue: 'vue/dist/vue.js',
    },
  },

完整配置（开发环境）

module.exports = {
  devtool: 'source-map', // 代码调试，可去除控制台提示
  mode: 'development',
  entry: path.join(__dirname, './src/main.js'),
  output: {
    publicPath: './',
    path: path.join(__dirname, './dist'),
    filename: 'index.js',
  },

  module: {
    rules: [
      { test: /\.css$/i, use: ['style-loader', 'css-loader'] },
      { test: /\.(jpg|png|gif|svg)$/, use: [{ loader: 'url-loader', options: { limit: 60000, esModule: false } }], type: 'javascript/auto' },
    ],
  },

  // 解决element-ui  el-table 数据不渲染问题
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': path.resolve('./node_modules'),
      vue: 'vue/dist/vue.js',
    },
  },

  // 热加载
  watch: true,
}

package.json 文件

vue 和 element-ui 版本

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --config ./webpack.config.js",
    "server": "live-server ./dist",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^1.1.3",
    "element-ui": "^2.15.12",
    "vue": "^2.7.14",
    "vue-table-with-tree-grid": "^0.2.4"
  },
  "devDependencies": {
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "url-loader": "^4.1.1"
  }
}

解析器（Resolvers） | webpack 中文文档