为什么process.env.NODE_ENV不报错,process.env报错
时间: 2024-01-05 12:17:30 浏览: 46
根据提供的引用内容,可以得知VueCli使用dotenv来管理环境变量,并且定义在环境变量文件中的参数会被注入到process.env中。因此,process.env.NODE_ENV不报错是因为它是一个预定义的环境变量,而process.env报错可能是因为没有定义相应的环境变量或者没有正确引入dotenv模块。需要注意的是,如果没有正确引入dotenv模块,那么在process.env中获取环境变量的值时会报错。
相关问题
process.env.VUE_APP_BASE_API怎么配置vue2
在Vue2中,可以在项目的根目录中创建一个`.env`文件,然后在文件中设置环境变量。例如,如果你想设置`process.env.VUE_APP_BASE_API`变量,可以在`.env`文件中添加以下内容:
```
VUE_APP_BASE_API=http://api.example.com
```
然后,在Vue组件或其他地方中,你可以通过`process.env.VUE_APP_BASE_API`来访问该变量,例如:
```
axios.get(process.env.VUE_APP_BASE_API + '/users')
```
注意,变量名必须以`VUE_APP_`开头,这是Vue CLI的限制。还需要在Vue组件或其他地方中导入`process`对象,例如:
```
import process from 'process'
```
或者在`.eslintrc.js`文件中添加以下配置:
```
env: {
node: true,
browser: true,
es6: true
},
globals: {
process: true
}
```
这样就可以在Vue组件或其他地方中直接使用`process`对象了。
export default ({ command, mode }) => { const NODE_ENV = process.env.NODE_ENV || 'development' const envFiles = [ .env.${NODE_ENV} ] for (const file of envFiles) { const envConfig = dotenv.parse(fs.readFileSync(file)) for (const k in envConfig) { process.env[k] = envConfig[k] } } viteLogo(process.env) const timestamp = Date.parse(new Date()) const optimizeDeps = {} const alias = { '@': path.resolve(__dirname, './src'), 'vue$': 'vue/dist/vue.runtime.esm-bundler.js', } const esbuild = {} const config = { base: './', // index.html文件所在位置 root: './', // js导入的资源路径,src resolve: { alias, }, define: { 'process.env': {} }, server: { // 如果使用docker-compose开发模式,设置为false open: true, port: process.env.VITE_CLI_PORT, proxy: { // 把key的路径代理到target位置 // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VITE_BASE_API]: { // 需要代理的路径 例如 '/api' target: `${process.env.VITE_BASE_PATH}/`, // 代理到 目标路径 changeOrigin: true, rewrite: path => path.replace(new RegExp('^' + process.env.VITE_BASE_API), ''), }, [process.env.VITE_BASE_EXPORT_API]: { // 需要代理的路径 例如 '/api' target: `${process.env.VITE_BASE_REPORTAPI}/`, // 代理到 目标路径 changeOrigin: true, rewrite: path => path.replace(new RegExp('^' + process.env.VITE_BASE_EXPORT_API), ''), }, }, }, build: { target: 'es2017', minify: 'terser', // 是否进行压缩,boolean | 'terser' | 'esbuild',默认使用terser manifest: false, // 是否产出manifest.json sourcemap: false, // 是否产出sourcemap.json outDir: 'dist', // 产出目录 // rollupOptions, }, 使用vite部署时,请帮我修改以上代码,当build打包时,前端页面url新增VITE_PUBLIC_PATH= '/devOnlineStatus/'前缀
export default ({
command,
mode
}) => {
const NODE_ENV = process.env.NODE_ENV || 'development'
const envFiles = [
`.env.${NODE_ENV}`
]
for (const file of envFiles) {
const envConfig = dotenv.parse(fs.readFileSync(file))
for (const k in envConfig) {
process.env[k] = envConfig[k]
}
}
viteLogo(process.env)
const timestamp = Date.parse(new Date())
const optimizeDeps = {}
const alias = {
'@': path.resolve(__dirname, './src'),
'vue$': 'vue/dist/vue.runtime.esm-bundler.js',
}
const esbuild = {}
const config = {
base: './', // index.html文件所在位置
root: './', // js导入的资源路径,src
resolve: {
alias,
},
define: {
'process.env': {}
},
server: {
// 如果使用docker-compose开发模式,设置为false
open: true,
port: process.env.VITE_CLI_PORT,
proxy: {
// 把key的路径代理到target位置
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VITE_BASE_API]: { // 需要代理的路径 例如 '/api'
target: `${process.env.VITE_BASE_PATH}/`, // 代理到 目标路径
changeOrigin: true,
rewrite: path => path.replace(new RegExp('^' + process.env.VITE_BASE_API), ''),
},
[process.env.VITE_BASE_EXPORT_API]: { // 需要代理的路径 例如 '/api'
target: `${process.env.VITE_BASE_REPORTAPI}/`, // 代理到 目标路径
changeOrigin: true,
rewrite: path => path.replace(new RegExp('^' + process.env.VITE_BASE_EXPORT_API), ''),
},
},
},
build: {
target: 'es2017',
minify: 'terser', // 是否进行压缩,boolean | 'terser' | 'esbuild',默认使用terser
manifest: false, // 是否产出manifest.json
sourcemap: false, // 是否产出sourcemap.json
outDir: 'dist', // 产出目录
// rollupOptions,
},
}
// Add VITE_PUBLIC_PATH to the define object when building
if (command === 'build') {
config.define['process.env.VITE_PUBLIC_PATH'] = "'/devOnlineStatus/'"
}
return config
}