Vue项目跨平台迁移会出现的坑

坑一 .babelrc文件 ES6语法编译配置

错误代码

Failed to compile with 2 errors                                                                                    10:48:51
 error  in ./src/permission.js

Syntax Error: Unexpected token (34:19)

  32 |           store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
  33 |             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
> 34 |             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
     |                    ^
  35 |           })
  36 |         }).catch((err) => {
  37 |           store.dispatch('FedLogOut').then(() => {



 @ ./src/main.js 17:0-22
 @ multi (webpack)-dev-server/client?http://localhost:8088 webpack/hot/dev-server ./src/main.js

 error  in ./src/router/index.js

Syntax Error: Unexpected token (11:42)

   9 | 
  10 | export const constantRouterMap = [
> 11 |   { path: '/adminlogin', component: () => import('@/views/login/index'),hidden: true},
     |                                           ^
  12 |   { path: '/userlogin', component: () => import('@/views/login/user'),hidden: true},
  13 |   { path: '/404', component: () => import('@/views/404'), hidden: true },
  14 |   { path: '/register', component: () => import('@/views/register/index'), hidden: true },



 @ ./src/main.js 5:0-30
 @ multi (webpack)-dev-server/client?http://localhost:8088 webpack/hot/dev-server ./src/main.js

错误原因

• 1、ES6 新增了不少标识符，但浏览器大多无法直接识别，需要借助 babel 对 ES6 代码进行转义
• 2、项目启动时抛出如下错误，表示 ... 运算符没能被识别，该运算符属于 ES6 的解构运算符
• 3、出现该问题的原因基本上可以定位是项目没有配置 babel
• 4、即时 package.json 文件中已经引入 babel ，但仍然需要在项目根目录创建一个 .balbelrc 文件进行配置

解决方式

• 在项目根目录创建 .babelrc 文件即可实现对 babel 的基本配置

{
  "presets": [
    ["env", {
      "modules": false
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime", "transform-vue-jsx"]
}

坑二 .postcssrc.js文件 post css 配置文件

错误代码

error  in ./node_modules/element-ui/lib/theme-chalk/index.css

Module build failed: Error: No PostCSS Config found in: /Users/shandikeji/Desktop/国密/GM/node_modules/element-
ui/lib/theme-chalk
    at config.load.then (/Users/shandikeji/Desktop/国密/GM/node_modules/postcss-load-config/src/index.js:55:15)

 @ ./node_modules/element-ui/lib/theme-chalk/index.css 4:14-124 13:3-17:5 14:22-132
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8088 webpack/hot/dev-server ./src/main.js

错误原因

• 这是因为缺少了一个配置文件，postcss.config.js，配置内容如下

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