前端 - Vue构建项目时import vue有问题啊

问题描述

问 题

目录如下：

/app/main.js入口
vue为npm安装
webpack打包输出为/public/index.js
Login.vue中为简单的登录注册

index.html调用index.js

问题来了

main.js如下

import Vue from 'vue';
import  Login from './components/Login.vue'

var app = new Vue({
    el: '#app',
    data: {

    },

    template: '<Login/>',
    components: { Login }
});

index.html中引入index.js
打开浏览器

什么都没有啊

console中也没报错

引用的vue从npm安装的变成html中导入

其它不变

index.html引入

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

/app/main.js去掉import Vue这行这部分代码如下：

import  Login from './components/Login.vue'

var app = new Vue({
    el: '#app',
    data: {

    },

    template: '<Login/>',
    components: { Login }
});

只把vue引入部分从npm的换成了<script>引入

然后就有东西了

到底怎么回事?
浪费我好多时间啊

解决方案

贴一下你webpack的配置，可以考虑在resolve中重新定义一下引用vue的路径，类似这样

resolve: {
      alias: {  
        vue: 'vue/dist/vue.js' }
  },

这篇关于前端 - Vue构建项目时import vue有问题啊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！