解决npm run serve运行报错的方法

一、检查配置文件

当我们运行npm run serve时，很多时候是因为配置文件出现了问题而导致报错。

1、package.json

{
  "name": "example",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.1",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.9",
    "@vue/cli-plugin-eslint": "^4.5.9",
    "@vue/cli-service": "^4.5.9",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "vue-template-compiler": "^2.6.11"
  }
}

我们先检查一下package.json文件是否存在，是否缺少某些依赖包。

2、vue.config.js

module.exports = {
  devServer: {
    port: 8080,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        ws: true,
        changeOrigin: true
      }
    }
  }
}

检查vue.config.js文件是否有问题，如端口号是否配置正确，代理是否配置正确等等。

二、检查环境变量

在运行npm run serve时，环境变量也可能会出现问题。

1、NODE_ENV

"scripts": {
  "serve": "cross-env NODE_ENV=development vue-cli-service serve",
  "build": "cross-env NODE_ENV=production vue-cli-service build",
  "lint": "vue-cli-service lint"
}

检查一下NODE_ENV是否正确配置。

2、BASE_URL

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

检查一下是否有配置正确的BASE_URL。

三、升级依赖包版本

运行npm run serve时，有可能是因为依赖包版本的问题而导致出错。需要先更新依赖包版本。

使用npm-check-updates进行依赖包版本的升级。安装npm-check-updates：

npm install -g npm-check-updates

升级依赖包：

npx ncu -u

更新完毕后，重新安装依赖包：

npm install

四、更新node版本

npm run serve可能会因为node版本过低而导致出错。需要先更新node版本。

使用n工具进行node版本的管理。安装n：

npm install -g n

使用n进行node版本的安装及切换：

n stable
n 16.13.2

安装完毕后，在项目目录下重新运行npm install，然后运行npm run serve。