zoukankan      html  css  js  c++  java
  • 记一次vue采坑 npm run dev 过程:component: () => import() 出现错误

    第一次接触VUE,今天为了跑通公司项目,着实费了不少劲。

    主要起因是命令:

    npm run dev 

    在编译过程中报错:Syntax Error: Unexpected token (4:19)

     原来是import这儿报错了,这就需要babel的插件了,vue-router官网上有一段提示:
    如果您使用的是 Babel,你将需要添加 syntax-dynamic-import 插件,才能使 Babel 可以正确地解析语法。

    运行命令:

    npm install babel-plugin-syntax-dynamic-import --save-dev

    然后修改webpack的js的loader部分:

    {
    
    test: /.js$/,
    
    loader:'babel-loader',
    
    options:{
    
    plugins:['syntax-dynamic-import']
    
    },
    
    },

    增加了option选项,至此,能识别我们:const App = () => import('../component/Login.vue');的语法。

    我的代码是从gitlab clone下来的,执行

    npm install
    
    npm run dev
    这时报错 Error: No PostCSS Config found in... 

    解决方案

    在项目根目录新建postcss.config.js文件,并对postcss进行配置:

    module.exports = { 
      plugins: { 
        'autoprefixer': {browsers: 'last 5 version'} 
      } 
    }

    好了 试试

    npm run dev

    至此,问题全部解决了。

    项目为什么上传到 GitHub 之后,再 clone 下来,再运行就得单独写一个 postcss.config.js 的文件并配置一下呢?

    在npm上查到的postcss配置在webpack.config.js,
    postcss.config.js是针对webpack3.0做的特殊处理

     
  • 相关阅读:
    .NET Tools...
    函数重载
    友元课后题
    怎么防止用户输入错误信息
    C#动态求圆的面积
    重载自增
    C++数学应用
    位运算符
    MSDN放出了VS2010简体中文正式版(附下载地址)
    字符串复制
  • 原文地址:https://www.cnblogs.com/qichao123/p/12008046.html
Copyright © 2011-2022 走看看