Nuxt项目环境区分及生产环境去除console

最新推荐文章于 2024-08-02 00:07:16 发布

Fluoxetine^.^

最新推荐文章于 2024-08-02 00:07:16 发布

阅读量1.2k

点赞数

文章标签： vue.js npm node.js 前端框架

本文链接：https://blog.csdn.net/weixin_48366131/article/details/125368014

版权

环境区分载插件cross-env

1.npm install --save-dev cross-env
2.根目录创建env.js

module.exports = {
    // 开发测试环境
    DEV: {
        NODE_ENV: 'DEV',
        API_URL: 'http://18.163.xxx.xxx:8080',
        IMKEY: '11xxdd34234290546#xxxxxx'
    },
    TEST: {
        NODE_ENV: 'TEST',
        API_URL: 'http://18.163.xxx.xxx:8080',
        IMKEY: '11xxdd34234290546#xxxxxx'
    },
    // 生产环境
    PRO: {
        NODE_ENV: 'PRO',
        API_URL: 'https://xxxxxx.com',
        IMKEY: '1234567800111#xxxxxv'
    },
}

3.nuxt.config.js设置env

import env from './env.js' // 头部导入
 env: {
    NODE_ENV: env[process.env.NODE_ENV].NODE_ENV,
    API_URL: env[process.env.NODE_ENV].API_URL,
    IMKEY: env[process.env.NODE_ENV].IMKEY,
  },

4.package.json中配置命令

"scripts": {
    "dev": "cross-env NODE_ENV=DEV nuxt",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=PRO nuxt start",
    "launch": "cross-env node=PRO   npm run build && pm2 start npm -- run start",
    "devtest": "cross-env NODE_ENV=TEST  npm run build && pm2 start npm -- run devstart",
  },

5.例如：

npm run dev
console.log(process.env.NODE_ENV, '环境变量=======》')  //  DEV, 环境变量=======》

生产去除console

下载 npm i babel-plugin-transform-remove-console -D
2.在nuxt.config.js配置

let IsConsole = []
if (process.env.NODE_ENV === 'PRO') {
  IsConsole.push("transform-remove-console")
}
// 添加到bable中
 build: {
    babel: {
      "plugins": [
        [
          "component",
          {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }
        ],
        ...IsConsole
      ]
    },
    vendor: ['element-ui', 'vue-i18n'], // 防止重复重复打包
  }