likes
comments
collection
share

关于前端项目开发的配置

作者站长头像
站长
· 阅读数 65

process.env 和 NODE_ENV是什么呢？

process.env是node.js中的一个环境对象而NODE_ENV是process.env中的一个环境变量，那么这个环境变量有什么用呢，它主要是用于识别当前的环境从开发到上线一般会分为几种环境（开发环境、测试环境、预发布环境、生产环境等等）这个环境变量是需要手动自己配置的，每个模式都会将 NODE_ENV 的值设置为模式的名称（当文件内不包含 NODE_ENV 这个变量时），如在 development 模式下，NODE_ENV 的值会被设置成 "development"，在vue项目中提供了其自己的配置方式下面给大家介绍一下vue中如何配置环境变量。

怎么在不同的模式下去配置不同的环境变量

在vue项目的根目录中 (注意要在根目录中) 新建.env文件层架后缀来设置某个模式下特有的环境变量，比如要在测试环境下使用测试环境中的变量个人习惯会命名为.env.test的文件那么在这个文件中声明的变量就只会在test模式下被载入。

注意： 配置环境变量的时候只有NODE_ENV，BASE_URL和以VUE_APP_开头的变量会生效，所以当你想要进行配置变量时，需要以VUE_APP_开头并且需要大写，例如：VITE_APP_TITLE = 后台管理系统。

# 页面标题
VUE_APP_TITLE = 后台管理系统

# 测试环境配置
VUE_APP_ENV = 'staging'

# 测试环境
VUE_APP_BASE_API = '/syg-test-api'

devServer配置代理

该配置项是一个对象，主要是用于配置代理，解决本地开发时的跨域问题

devServer：{

    host:'0.0.0.0', 

    port:8080, // 监听端口，可以在环境文件中配置

    proxy:{
    
    // 将所有以 /api 开头的请求都代理到目标地址

        '/api':{

            target:process.env.VUE_APP_TARGET || 'http://192.168.0.115:8080',

            changeOrigin:true,

            pathRewrite:{ // 重写路径，最终请求的地址是 target + pathRewrite

                '^/api':'/'

            }

        }

    }

}

package.json 中的脚本配置

在package.json中我们需要对打包命令进行配置，比如测试环境有测试环境打包的命令这样就可以将我们在.env.test文件中配置好的环境变量载入。

// 本地运行脚本，终端执行 npm run dev 时就会执行 vue-cli-service serve
"dev": "vue-cli-service serve"

// 打包脚本
// 运行 npm run build:[mode] 时，打包时会载入对应 mode 的环境变量（配置的 env.[mode] 文件）
"build:test": "vue-cli-service build --mode test",
"build:prod": "vue-cli-service build --mode prod"

下图是vite中的打包脚本配置，与vue-cli项目类似

关于前端项目开发的配置

路由配置

base应用的基本路径：

// 部署生产环境和开发环境下的URL。
// 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
// 例如 https://www.test.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.test.com/admin/，则设置 baseUrl 为 /admin/。
    const { VITE_APP_ENV } = env;
    base: VITE_APP_ENV === "production" ? "/admin" : "./",

mode路由模式

路由模式分为哈希模式（hash）和历史模式（history）两者有什么区别呢？哈希模式的路径会携带#后面的参数不会随着请求发送而历史模式的路径没有#号并且参数会随着请求发送。所以在配置nginx时，由于部署前端的资源只有静态资源文件html css js img等所以使用了history模式的话可能会找不到带url参数的地址会返回404，解决种情况呢可以将路由模式改为哈希模式或者配置nginx访问不到带参数路径时返回index.html

axios中的baseURl配置

在我们实际项目开发中我们会针对不同的环境下访问后端请求不同的url那么我们当然要用到上面所提到的环境变量配置来配置我们的baseURL，在封装axios时候不要将baseURl给写死，否则不同环境下需要使用到不同的baseURl会造成很多不必要的麻烦。

// .env.test 文件
VUE_APP_BASEURL = 'https://test.com/'

// .env.prod 文件
VUE_APP_BASEURL = 'https://prod.com/'

在 axios 配置文件中，baseUrl 可以写成

baseUrl:process.env.VUE_APP_BASEURL
转载自:https://juejin.cn/post/7375018354481266698
评论
请登录