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": {}
}
}