webpack5启动项目报错：process is not defined

1.安装dotenv-webpack@8.1.0插件

2.在vue.config.js中配置

复制代码

const Dotenv = require("dotenv-webpack")
const env = process.env.NODE_ENV || "development"



plugins: [
    new DefinePlugin({}),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public/index.html'),
      filename: "index.html",
      templateParameters: {
        BASE_URL: `/`
      },
    }),
    //配置环境变量文件地址
    new Dotenv({
      path: `./.env.${env}`
    }),
  ],

3.新建.env.development、.env.production文件

复制代码

# just a flag
NODE_ENV = 'development'
STAGE = 'demo'
# LOCAL_URL = 'http://121.5.74.20/meapi/'

# default port
port = 3001

# base api
VUE_APP_BASE_API = '/apii'
# http://10.100.2.94:9011

# debugger modal
VUE_APP_DEBUG = false

4.所有webpack5+vue2对应的插件及版本

复制代码

{
  "name": "market-web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack serve --config ./vue.config.js",
    "build": "cross-env NODE_ENV=production webpack --config ./vue.config.js",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@babel/core": "^7.26.10",
    "@babel/plugin-transform-runtime": "^7.26.10",
    "@babel/preset-env": "^7.26.9",
    "@babel/runtime-corejs3": "^7.27.0",
    "axios": "^1.9.0",
    "babel-loader": "^10.0.0",
    "babel-polyfill": "^6.26.0",
    "core-js": "^3.41.0",
    "css-loader": "^7.1.2",
    "dotenv-webpack": "^8.1.0",
    "element-ui": "^2.15.3",
    "html-webpack-plugin": "^5.6.3",
    "mini-css-extract-plugin": "^2.9.2",
    "nprogress": "^0.2.0",
    "postcss-loader": "^8.1.1",
    "postcss-pxtorem": "^5.1.1",
    "sass": "^1.83.4",
    "sass-loader": "^10.2.0",
    "vue": "^2.6.14",
    "vue-loader": "^15.10.1",
    "vue-router": "^3.6.5",
    "vue-seamless-scroll": "^1.1.23",
    "vue-style-loader": "^4.1.3",
    "vuex": "^3.6.2",
    "webpack": "5.72.1",
    "webpack-cli": "5.0.0",
    "webpack-dev-server": "4.9.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "cross-env": "^7.0.3",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "^2.7.16"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  }
}