nuxt 根据不同环境打包不同接口axios配置html head配置 nuxt动态配置axios地址 nuxt 动态配置URL和接口地址

本文原创转载请注明链接 https://blog.csdn.net/weixin_38356321/article/details/93541461

首先下载cross-env nuxt一搬初始化的时候自带

nuxt根据不同环境打包接口 先看代码

package.json：

 

 "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "staging": "cross-env NODE_ENV=staging nuxt build",
    "production": "cross-env NODE_ENV=production nuxt build",
    "stagingStart": "cross-env NODE_ENV=staging node server/index.js",
    "productionStart": "cross-env NODE_ENV=production node server/index.js",
    "generate": "nuxt generate",
    "deploy:staging": "./deploy.sh remote staging",
    "deploy:prod": "./deploy.sh remote prod"
 },

script中 staging为测试环境的打包命令

             production 为正式环境的打包命令

             stagingStart 为测试环境启动nuxt服务端渲染命令

             productionStart 为正式环境启动nuxt服务端渲染命令

             deploy为前端自动化部署命令  删除就好（下次写前端自动化部署）

再来看看nuxt.config.js的代码

const env = process.env.NODE_ENV

module.exports = {
  mode: 'universal',
  render: {
    resourceHints: true,
  },
  server: {
    port: 8002,
    host: '0.0.0.0'
  },
  /*
  ** Headers of the page
  */
  // html头部配置
  head: {
    title: '',
    meta: [
      { charset: 'utf-8' },
      // { name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no' },
      // { name: 'viewport', content: 'width=device-width, user-scalable=yes' },
      { name: 'viewport', content: 'width=1140, initial-scale=1.0, user-scalable=yes'},
      { name: 'viewport', content: 'width=1140, user-scalable=yes'},
      { hid: 'keywords', name: 'keywords', content: ''},
      { hid: 'description', name: 'description', content: ''}
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '引入浏览器tab icon' },
    ],
    script: [
      // 百度主推文章收录用
      { src: env === "development" || env === "staging" ? '' : '百度统计链接' },
      // 加入百度统计js，使用时自行添加为自己的
      { src: env === "development" || env === "staging" ? '' : '百度统计链接' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: './components/Loading',
  /*
  ** Global CSS
  */
  css: [
    'element-ui/lib/theme-chalk/index.css',
    '~assets/css/global.scss',
    '~assets/css/music.scss',
    // { src: '*.scss', lang: 'scss' }
  ],
  /*
  ** Plugins to load before mounting the App
  */
  // 插件引用
  plugins: [
    { src: '@/plugins/element-ui', ssr: true },
    { src: "@/plugins/axios.js", ssr: false },
    { src: "@/plugins/utils.js", ssr: false },
    { src: "@/plugins/loadMore.js", ssr: false },
    { src: "@/plugins/lazyload.js", ssr: false },
    { src: "@/components/index", ssr: true }
  ],
  /*
  ** Nuxt.js modules
  */
  modules: ["@nuxtjs/axios", '@nuxtjs/style-resources'],
  axios: {
    retry: { retries: 0 }, // 接口报错后重复请求次数
    //开发模式下开启debug
    // debug: process.env.ENV == "production" ? false : true,
    //设置不同环境的请求地址
    proxy: env === "development" ? true : false,
    prefix: env === "development" ? '/api' : '',
    baseURL: env === "development" || env === "staging" ? "测试接口地址" : "生产接口地址"
  },
  proxy: {
    //开启代理
    "/api": {
      target: "接口地址",
      pathRewrite: {
        "^/api": "/",
        changeOrigin: true
      }
    }
  },
  /*
  ** Build configuration
  */
  build: {
    transpile: [/^element-ui/],
    analyze: env === 'staging', // 分析打包情况的配置
    assetFilter: function(assetFilename) {
      return assetFilename.endsWith('.js')
    },
    extractCSS: true,
    filenames: {
      chunk: ({isDev}) => isDev ? '[name].js' : '[id].[chunkhash].js',
      css: ({isDev}) => isDev ? '[name].css' : '[contenthash].css'
    }
    // extend(config, ctx) {},
    // cssSourceMap: false,
    // terser: {
    //   sourceMap: false
    // }
  }
}

根据process.env.NODE 的直来判断是开发环境还是测试环境还是正式环境  来配置不同的API接口

这里说下axios内的retry属性  是接口请求报错后再次重复请求的次数。这里之前遇到过问题  配置3无论几次都是无限次的刷接口。后来更新了下axios的版本好了。

写文章只为锻炼提升自己。望各位大佬指点不足之处。

本文原创转载请注明链接 https://blog.csdn.net/weixin_38356321/article/details/93541461