webpack 打包后vue不能识别模板中的vue组件标签 5C

1. 问题:webpack 打包后vue不能识别模板中的vue组件标签

2. 具体代码

2.1 依赖的第三方库

 "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.0-beta.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "copy-webpack-plugin": "^6.0.2",
    "vue-loader": "^15.9.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^4.2.2"
  },
  "dependencies": {
    "@babel/core": "^7.10.3",
    "@babel/preset-env": "^7.10.3",
    "@handsontable/vue": "^5.0.1",
    "bable-loader": "0.0.1-security",
    "bluebird": "^3.7.2",
    "css-loader": "^3.6.0",
    "cube-ui": "^1.12.42",
    "echarts": "^4.8.0",
    "element-ui": "^2.13.2",
    "file-loader": "^6.0.0",
    "gojs": "^2.1.18",
    "handsontable": "^8.0.0",
    "html-loader": "^1.1.0",
    "jquery": "^3.5.1",
    "localforage": "^1.7.4",
    "url-loader": "^4.1.0",
    "vue": "^2.5.17",
    "vue-echarts": "^5.0.0-beta.0",
    "vue-ueditor-wrap": "^2.4.3",
    "vue-video-player": "^5.0.2"
  }

2.2 打包代码

module.exports = {
    mode: 'development',
    devtool: "cheap-module-eval-source-map",//开发模式下打包设置
    //devtool: "cheap-module-source-map",//生产模式下打包设置(查错)
    entry : {
        "vm": resolve("src/js/Test/vm.js")
    },
    output: {
        path:  path.resolve('./public'),
        filename: "[name].js"
     },
    resolve: {
        extensions: ['.js', '.vue'], // 引用js和vue文件可以省略后缀名
        alias: {
            // 别名
            vue$: "vue/dist/vue.esm.js", //加上这一句
        }
    },
    module: {
          rules:[
              {
                  test: /\.html$/i,
                  loader: 'html-loader',
              },
              {
                 test: /\.vue$/,
                 loader: 'vue-loader'
              },

              {
                  test: /\.js$/,
                  exclude: /(node_modules|bower_components)/,
                  use: {
                      loader:'babel-loader',
                      options: {
                          presets: ["@babel/preset-env"]
                      }
                  }
              },

              {
                  test: /\.css$/i,
                  use: [
                      {
                          loader: 'css-loader'    // 放在后面的先被解析
                      }
                  ]
              },
              //小于限制的转为base64,大于的自动启动file-loader
              {
                  test: /\.(png)|(jpg)|(gif)|(woff)|(svg)|(eot)|(ttf)$/,
                  use: [
                      {
                          loader: 'url-loader',
                          options: {
                              name:'[name].[ext]',
                              outputPath:'image/',
                              limit: 2048
                          },
                      },
                  ],
              },
          ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery'    //webpack会检测模块代码有没有使用jq,有就会自动帮你import
        }),
        new VueLoaderPlugin()
    ],

2.3 js内容

vm.js
import Vue from 'vue';
import comA from "./comA";
comA();
new Vue({
    el:"#phone",
    updated: function () {
        console.log('updated 更新完成状态===============》');
    },
    mounted: function () {
        console.log('mounted 挂载结束状态===============》');
    }
})

comA.js

import Vue from 'vue';
export default function comA() {
    Vue.component("a-com",{
        template:'<div>hhahhahahahahahhhahhah</div>'
    })
}

html

```<!DOCTYPE html>



Title



2.4运行截图
![运行后页面上无文字](https://img-ask.csdn.net/upload/202008/13/1597316110_872530.png)

![在此打断点](https://img-ask.csdn.net/upload/202008/13/1597316154_419702.png)
![此时组件已注册成功](https://img-ask.csdn.net/upload/202008/13/1597316162_428948.png)

![a-com未被vue识别](https://img-ask.csdn.net/upload/202008/13/1597316228_881713.png)

2个回答

应该是命名方式有错,使用驼峰方式命名看一下

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐