在 Vercel 上托管时 NuxtJS 生产中的 URIError答案

【问题标题】：URIError in NuxtJS production when hosting on vercel在 Vercel 上托管时 NuxtJS 生产中的 URIError
【发布时间】：2021-07-27 00:23:36
【问题描述】：

我正在 nuxt 中开发一个带有 ssr 的应用程序。我遇到的问题是当我在构建和生成后运行“npm start”时。该应用程序开始正常工作，但是当我尝试登录时它不起作用，尽管在开发模式下它工作得很好。该 api 是用 express 构建的，我使用令牌和 nuxt auth 作为身份验证方法。在 auth 策略中声明的服务器端点永远不会被执行，使用登录端点处理程序上的 console.log() 来检查。任何人都知道我该如何解决这个问题？感谢您的宝贵时间！

登录组件脚本：

<script>
import { mapGetters } from 'vuex'
import index from './index.vue'

export default {
  components: {
    index,
  },
  data() {
    return {
      email: '',
      password: '',
    }
  },
  computed: {
    ...mapGetters(['isAuthenticated']),
  },
  methods: {
    close() {
      this.$router.push('/')
    },
    login() {
      const button = document.querySelector('.center-form button')
      button.disabled = true
      button.innerHTML = '...'

      const data = { password: this.password, email: this.email }
      this.$auth
        .loginWith('local', { data })
        .then((x) => {
          this.$auth.strategy.token.set(x.data.token)
          this.$router.push('publicar-inmueble')
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
}
</script>

Nuxt 认证策略：

auth: {
  strategies: {
    local: {
      token: {
        property: 'token'
      },
      user: {
        property: 'user'
      },
      endpoints: {
        login: { url: '/server/api/usuarios/login', method: 'post', propertyName: 'data' },
        user: { url: '/server/api/usuarios/mi-perfil', method: 'get', propertyName: 'data' },
        logout: { url: '/server/api/usuarios/logout', method: 'delete' }
      }
    }
  }
},

商店：

export const getters = {
  isAuthenticated(state) {
    return state.auth.loggedIn
  },

  loggedInUser(state) {
    return state.auth.user
  }
}

【问题讨论】：

您是否在生产环境中设置了环境变量？
我没有，我应该创建什么 .env 变量？
您在哪里托管您的应用程序？等等，你根本不使用.env 文件吗？ URL 等是否被硬编码到您的代码中？
我使用的唯一 .env 变量是 MONGODB_URI。我不知道我还需要什么其他 .env 变量
您在哪里托管您的应用程序？ .env 通常不会被 git 跟踪，因此如果您将其部署到生产环境，平台将不知道您的 .env 文件。

标签： javascript vue.js nuxt.js vercel

【解决方案1】：

在 vercel 上转到您应用的设置，网址应如下所示：
https://vercel.com/<your-username>/<your-project>/settings/environment-variables

在那里，放入您的环境变量（我的屏幕截图是一个值示例！）并触发您的应用程序的构建。那么应该可以正常工作了。

【讨论】：