关于nuxt中配置不同开发环境

weixin_42722914

已于 2022-06-24 16:17:39 修改

阅读量748

点赞数 1

文章标签：前端 javascript 开发语言

于 2022-06-24 11:16:58 首次发布

本文链接：https://blog.csdn.net/weixin_42722914/article/details/125441782

版权

1.pacakage.json中的script中
"dev": "cross-env MODE=dev nuxt --open --progress", 
"generate": "cross-env MODE=pro nuxt generate"
 generate 打包命令
 "cross-env MODE=dev相当于将dev值存储node 中process.env的MODE属性里面了
2.创建一个不同域名环境env.js
  module.exports = {
dev: {
	MODE: "development",
	ENV_API: "http://dev/" //测试服务器地址
},
test: {
	MODE: "test",
	ENV_API: "http://test/" //测试服务器地址
},
pro: {
	MODE: "production",
	ENV_API: "https://pro/" // 正式服务器地址
}
3.nuxt.config.js 中
const env = require("./env");
env: {
    baseUrl: env[process.env.MODE].ENV_API   //process.env 获取的是package里面的MODE值
 },

"dev": "cross-env MODE=dev nuxt --open --progress",
"build": "cross-env MODE=pro nuxt build && yarn start",
"build:dev": "cross-env MODE=dev nuxt build && yarn dev",
"start": "cross-env MODE=pro nuxt start",
npm run build:dev 会执行 build:dev的脚本进行动态打包，然后再执行yarn dev 又会执行dev的命令行打开项目
generate 是静态打包成css,js