Vue-cli 踩坑

记录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')
    }
  }

未完待续.....

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容