【解决】process is not defined

说在前面

最近在搭建前端框架，过程中遇到了不少问题，其中一个问题比较棘手，项目技术栈是webpack + vue，因为没有使用vue-cli,打包之后在前端运行报错process is not defined，网上也没有比较成熟的解决方案，特此记录，帮助有缘人。

知根溯源

了解到这个问题之后，我发现打包后的代码多处使用了process.env.NODE_ENV这个变量，但是却没有地方声明，这是导致该问题的主要原因。

代码中访问process.env.NODE_ENV是以全局变量的方式去访问的，所以关键环节是在全局变量中添加该值。

process.env其实是node运行环境中的变量，也就是说，其实项目打包的过程中，是可以访问到该变量的。

然后，通过webpack的DefinePlugin是可以定义全局变量的。

问题解决

解决该问题，只要将node的变量，转换成为代码运行过程中的全局变量即可，所以在webpack.config.js中添加这句话即可。

const path = require('path');
const webpack = require('webpack')

module.exports = {
    mode: "none",
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.DefinePlugin({ // webpack自带该插件，无需单独安装
            'process.env' : {
                NODE_ENV: process.env.NODE_ENV // 将属性转化为全局变量，让代码中可以正常访问
            }
        })
    ]
}

说到最后

以上。