【解决】process is not defined

说在前面

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

知根溯源

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

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

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

然后,通过webpackDefinePlugin是可以定义全局变量的。

问题解决

解决该问题,只要将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 // 将属性转化为全局变量,让代码中可以正常访问
            }
        })
    ]
}

说到最后

以上。

你可能感兴趣的:(Some,meaningful,webpack,前端,vue.js)