使用vue-cli3.0创建项目创建全局组件无效

使用vue-cli3创建一个空白项目,有时候莫名其妙的创建全局变量无效,如:

从管网文档直接拿一个组件demo

// main.js
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

// Demo.vue
<template>
  <div class="demo">
     <button-counter/>
  </div>
</template>

报错:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

原因:

vue有两种形式的代码 compiler(模板)模式和runtime模式(运行时),vue模块的package.json的main字段默认为runtime模式, 指向了”dist/vue.runtime.common.js”位置。

解决方法1

在项目根目录创建vue.config.js文件,添加vue别名,代码:

// vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
//添加vue别名
        'vue$': 'vue/dist/vue.esm.js' 
      }
    }
}

//或

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias
//添加vue别名
      .set('vue$', 'vue/dist/vue.esm.js') 
  }
}

添加vue别名,import Vue from ‘vue’ 这行代码被解析为 import Vue from ‘vue/dist/vue.esm.js’,直接指定了文件的位置,没有使用main字段默认的文件位置

解决方法2

所有引用vue的都以vue/dist/vue.esm.js引入

import Vue from 'vue/dist/vue.esm.js'

使用vue-cli3.0创建项目创建全局组件无效》有1个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注