@vue/cli是基于Webpack的打包构建工具，有一些常见的问题…

系列文章：

一、Webpack 相关

待补充…

二、常见问题（@vue/cli）

1. 第三方依赖包?.语法，编译时无法解析

详细报错：

lianpf@lianpf-PC:~/xxx/lbsys-front-bh-feature-V4.20.0$ npm run dev

> lbsys-front-bh@1.0.0 dev
> cross-env PLATFORM_MODEL=development npm run serve

> lbsys-front-bh@1.0.0 serve
> vue-cli-service serve

 INFO  Starting development server...
12% building 19/22 modules 3 active /xxx/lbsys-front-bh-feature-V4.20.0/node_modules/webpack-dev-server/node_modules/strip-ansi/index.jsBrowserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 error                                                                                                                                                 18:21:43

 error  in ./node_modules/@lianpf/native-sdk/src/utils/util.js

Module parse failed: Unexpected token (37:18)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     const resError = {
|       platform,
>       code: error?.code,
|       errorCode: error?.subCode,
|       message: error?.message

 @ ./node_modules/@lianpf/native-sdk/src/zmini/faceRecognition/index.js 2:0-45 5:9-20
 @ ./node_modules/@lianpf/native-sdk/src/zmini/index.js
 @ ./node_modules/@lianpf/native-sdk/src/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://10.10.134.102:8088/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

解决思路1：升级@vue/cli版本

$ vue --version # 查看@vue/cli 版本

解决思路2：项目lbsys-front-bh-feature-V4.20.0中vue.config.js处理

const transformerFactory = require('ts-import-plugin')

module.exports = {
  // ...
  chainWebpack: (config) => {
    // 处理 node_modules 中的特定文件
    config.module
      .rule('js-in-node_modules')
      .test(/\.js$/)
      .include
        .add(/node_modules[\\/]@lianpf[\\/]native-sdk/)
        .end()
      .use('babel-loader')
        .loader('babel-loader')
        .options({
          presets: ['@babel/preset-env'],
        })
        .end();
        
    // ...
  }
}

注意：babel相关版本过低，可能提示需要安装@babel/plugin-proposal-optional-chaining，此时可选择安装。或者参考如下package.json中的babel依赖版本:

{
    "scripts": {
        "build": "babel src -d lib" // 构建命令
    },
    "devDependencies": { 
        "@babel/cli": "^7.23.4", // babel 依赖
        "@babel/core": "^7.23.5",
        "@babel/preset-env": "^7.23.5"
    }
}

参考

  • …

最后， 希望大家早日实现：成为编程高手的伟大梦想！
欢迎交流~

微信公众号

本文版权归原作者曜灵所有！未经允许，严禁转载！对非法转载者, 原作者保留采用法律手段追究的权利！
若需转载，请联系微信公众号：连先生有猫病，可获取作者联系方式！