解決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。