美文网首页
Vue-cli 踩坑

Vue-cli 踩坑

作者: _尘_ | 来源:发表于2017-04-13 17:12 被阅读0次

    记录Vue-cli时遇到的问题,方便大家寻找

    搭建

    npm install -g vue-cli
    vue init webpack my-project
    cd my-project
    npm install
    

    如果遇到网络问题使用阿里镜像

    npm config set registry https://registry.npm.taobao.org

    运行

    npm run dev
    

    可能会遇到
    Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin
    这个错误

    错误1
    • 原因
      NODE_ENV不是development
    • 解决
      • 设置全局变量
        set NODE_ENV=development
      • 修改package.json中的dev命令

    "dev": "cross-env NODE_ENV=development node build/dev-server.js"
    // 需要注意安装cross-env
    // npm install -g cross-env --save-dev

    自定义模板

    一、 vue.common.js 和 vue.js的差别

    终于项目启动正常,But.....
    控制台爆红.....

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

    • 原因
      Vue@2X 版本默认maindist/vue.runtime.common.js只能用于Webpack@1XBrowserify等打包工具,而Webpack-2 和 rollup 等打包工具需要使用vue.runtime.esm.js
    • 解决(恢复)
      webpack配置中
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
       // 恢复,真怪自己手贱
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src')
        }
      }
    

    未完待续.....

    相关文章

      网友评论

          本文标题:Vue-cli 踩坑

          本文链接:https://www.haomeiwen.com/subject/fsnbattx.html