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": {}
  }
}
相关推荐
EndingCoder1 小时前
React从基础入门到高级实战:React 基础入门 - React Hooks 入门
前端·javascript·react.js·前端框架
EndingCoder1 小时前
React从基础入门到高级实战:React 基础入门 - JSX与组件基础
前端·javascript·react.js·前端框架
Space Chars2 小时前
【大前端】使用NodeJs HTTP模块创建web服务器、SSE通讯
服务器·前端·http
Quke陆吾2 小时前
Vue框架1(vue搭建方式1,vue指令,vue实例生命周期)
前端·javascript·vue.js
苹果酱05672 小时前
Java设计模式:探索编程背后的哲学
java·vue.js·spring boot·mysql·课程设计
Oscar_02083 小时前
uniapp+ts 多环境编译
前端·vue.js·typescript·uni-app
shmily麻瓜小菜鸡3 小时前
前端项目中实现页面看起来像是浏览器缩放到了80%的效果
前端
EndingCoder3 小时前
从零基础到最佳实践:Vue.js 系列(9/10):《单元测试与端到端测试》
前端·javascript·vue.js·性能优化·单元测试·vue3
How_doyou_do3 小时前
Vue-创建应用/挂载应用/根组件模版-.vue单文件/应用配置
前端·javascript·vue.js
王者鳜錸4 小时前
Vue3集成Element Plus完整指南:从安装到主题定制下-实现后台管理系统框架搭建
前端·javascript·vue.js