说在前面
最近在搭建前端框架,过程中遇到了不少问题,其中一个问题比较棘手,项目技术栈是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 // 将属性转化为全局变量,让代码中可以正常访问
}
})
]
}
说到最后
以上。
更多推荐
【解决】process is not defined
发布评论