Nuxt - 环境分离

短命女 2022-01-26 15:55 233阅读 0赞

## Nuxt默认的环境分离 ##

Nuxt目前（2019/5/29）默认支持开发环境和生产环境，即通过运行`nuxt`启动开发环境服务，通过依次运行`nuxt build`，`nuxt start`启动生产服务，两者启动的时候均会有一个漂亮的日志输出，如下：  
**开发环境**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2Mjc4NjE_size_16_color_FFFFFF_t_70]  
需要注意的是，这里的**Running in `development` mode**, development是死的，不会根据NODE\_ENV自动切换。  
**生产环境**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2Mjc4NjE_size_16_color_FFFFFF_t_70 1]  
需要注意的是，这里的**Running in `development` mode**, development是死的，不会根据NODE\_ENV自动切换。

**调整端口**  
如果需要调整端口，则可以通过`PORT`指定，如下

"script": { 
        "dev": cross-env PORT=3001 nuxt // 设置开发环境端口
        "start": cross-env PORT=4000 nuxt start // 设置生产环境端口
    }

## 新增环境 ##

通常我们还需要一个测试环境，此时我们需要先了解nuxt build做了哪些事情。当通过`nuxt build`后，会生成`.nuxt`目录，该目录用于存放ssr渲染的客户端和服务端的文件，这些文件有些需要根据`process.env.NODE_ENV`来做逻辑处理，如生产环境需要添加百度统计的hmt.js脚本。默认情况下build时使用NODE\_ENV为`production`，并以production值进行构建处理，因此我们需要为build指定环境变量，如下：

"script": { 
        "build-test": cross-env NODE_ENV=test nuxt build
    }

构建之后，同样可以通过`nuxt start`启动，有一点不足的时，只要通过nuxt start启动服务，那么启动日志中就会带有`production`字样。

（完）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2Mjc4NjE_size_16_color_FFFFFF_t_70]: /images/20220126/1da0a31db62947769abe6bf66fe9a94b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2Mjc4NjE_size_16_color_FFFFFF_t_70 1]: /images/20220126/f0c4301e5719440fb70eb5b50ae5eb32.png