首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
varzy
V2EX  ›  前端开发

一个 webpack 加载 vue.js 的问题

  •  
  •   varzy · 2017-06-02 20:51:46 +08:00 · 1398 次点击
    这是一个创建于 968 天前的主题,其中的信息可能已经有所发展或是发生改变。

    webpack 和 vue 的初学者一枚。尝试在 webpack.config.js 中定义的入口文件中引入 vue.js 和 我自己的 main.js,vue 来源于 yarn。但在入口文件添加 import Vue from 'vue'; 命令后,写在 main.js 中的 vue 代码将不能正常解析,并在浏览器中报错 vue is not defined。如果将 import Vue from 'vue'; 写在 main.js 中,那么 main.js 中的 vue 代码就可以被正常解析了。

    在我这几天的了解中,webpack 难道不是将所有的 js 代码都打包为一个 js 文件吗?为什么还会出现上述问题?希望各位能给我点播一下。


    报错情况下的入口文件代码:

    import Vue from 'vue';
    require('./js/main');
    

    main.js:

    var app = new Vue({
      el: "#demo",
      data: {
        msg: "hello, world"
      }
    });
    

    正常运行情况下的入口文件代码:

    // import Vue from 'vue';
    require('./js/main');
    

    main.js:

    import Vue from 'vue';
    
    var app = new Vue({
      el: "#demo",
      data: {
        msg: "hello, world"
      }
    });
    
    6 回复  |  直到 2017-06-02 22:46:33 +08:00
    airyland
        1
    airyland   2017-06-02 21:26:03 +08:00
    不是。webpack 不是帮你直接合并文件。。
    izayl
        2
    izayl   2017-06-02 21:51:38 +08:00 via Android
    理解一下打包时候的作用域问题,如果按你理解的实现成功了,打包或者说模块化就没啥意义了
    oott123
        3
    oott123   2017-06-02 21:55:19 +08:00 via Android
    入口文件改成:
    import Vue from 'vue';
    window.Vue = Vue;
    require('./js/main');
    就行了。不过如 2 楼所说,这样模块化就失去了意义。
    Yuigahama
        4
    Yuigahama   2017-06-02 22:27:45 +08:00

    你得了解一下 webpack 到底干嘛的
    官方文档很详细
    yangff
        5
    yangff   2017-06-02 22:36:45 +08:00
    直接找个 seed 给他 clone 下来吧,简单直接=-=
    SourceMan
        6
    SourceMan   2017-06-02 22:46:33 +08:00 via iPhone
    vue-webpack-template
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2223 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 30ms · UTC 12:38 · PVG 20:38 · LAX 04:38 · JFK 07:38
    ♥ Do have faith in what you're doing.