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

1.安装[email protected]插件

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": {}
  }
}
相关推荐
Deepsleep.2 小时前
东田数码科技前端面经
前端·科技·面试
涵信4 小时前
第十八节:开放性问题-Vue生态未来趋势
前端·vue.js·devops
牧杉-惊蛰4 小时前
css 数字从0开始增加的动画效果
前端·javascript·css
孤灯淡茶4 小时前
Fiori学习专题十五:Nested Views
前端·javascript·学习
green_pine_4 小时前
CSS学习笔记14——移动端相关知识(rem,媒体查询,less)
前端·css·笔记·学习·less
Monly214 小时前
Vue:el-table-tree懒加载数据
前端·javascript·vue.js
进取星辰4 小时前
16、路由守卫:设置魔法结界——React 19 React Router
前端·javascript·react.js
清羽_ls5 小时前
cURL 入门:10 分钟学会用命令行发 HTTP 请求
前端·curl·命令行工具
jjw_zyfx5 小时前
vue3 css模拟语音通话不同语音、正在加载等的效果
前端·css
致微5 小时前
【Vue bug】:deep()失效
前端·vue.js·bug