webpack环境配置

lipenghao1112024-01-30 8:16

1.首先安装 cross-env

javascript 复制代码

npm install cross-env --save-dev

在package.json里面配置根据不同命令打包

javascript 复制代码

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.dev.js",
    "dev:test": "cross-env NODE_ENV=test webpack-dev-server --config webpack.config.dev.js",
    "dev:prod": "cross-env NODE_ENV=production webpack-dev-server --config webpack.config.dev.js",
    "build:dev": "cross-env NODE_ENV=development webpack --config webpack.config.dev.js",
    "build:test": "cross-env NODE_ENV=test webpack --config webpack.config.dev.js",
    "build:prod": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

2.在webpack.common.js配置

javascript 复制代码

    const webpack = require('webpack');

plugins: [
        new webpack.DefinePlugin({
            'process.env.API_BASE_URL': (() => {
              switch (process.env.NODE_ENV) {
                case 'production':
                  return JSON.stringify('https://****************************');
                case 'test':
                  return JSON.stringify('https://****************************');
                default:
                  return JSON.stringify('http://****************************');
              }
            })()
          }),
        new HtmlWebpackPlugin({ 
            template: 'app.html',       // 指定模板html文件
            filename: 'index.html'      // 输出的html文件名称
        }),
        new VueLoaderPlugin()
    ],

3.在封装的axios配置同意前缀变量

javascript 复制代码

axios.defaults.baseURL = process.env.API_BASE_URL