为 digitalocean 部署配置基本 url nuxt

Question

我正在使用 nuxt 和 node.js/express 构建电子商务网络应用程序。当我在本地构建时，我可以毫无问题地进行 axios api 调用。 base url配置如下

const baseDomain = 'http://localhost:8080/';

那么我要做的就是

async getProducts({ commit }, payload) {
        
        const reponse = await Repository.get(
            `${baseUrl}/products?${serializeQuery(payload)}`
        )
            .then(response => {
                commit('setProducts', response.data);
                return response.data;
            })
            .catch(error => ({ error: JSON.stringify(error) }));
        return reponse;
    },

现在的问题是，当我将整个应用程序移至数字海洋时，我尝试了以下更改

const baseDomain = 'https://0.0.0.0:8080/';

我的 nuxt.js 配置

export default {
    ssr: false,
    head: {
        titleTemplate: 'Lokazz',
        title: 'Lokazz',
        meta: [
            { charset: 'utf-8' },
            {
                name: 'viewport',
                content: 'width=device-width, initial-scale=1'
            },
            {
                hid: 'description',
                name: 'description',
                content:
                    'Lokazz'
            }
        ],
        link: [
            {
                rel: 'stylesheet',
                href:
                    'https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700&subset=latin-ext'
            }
        ]
    },

    css: [
        'swiper/dist/css/swiper.css',
        '~/static/fonts/Linearicons/Font/demo-files/demo.css',
        '~/static/fonts/font-awesome/css/font-awesome.css',
        '~/static/css/bootstrap.min.css',
        '~/assets/scss/style.scss'
    ],

    plugins: [
        { src: '~plugins/vueliate.js', ssr: false },
        { src: '~/plugins/swiper-plugin.js', ssr: false },
        { src: '~/plugins/vue-notification.js', ssr: false },
        { src: '~/plugins/axios.js'},
        { src: '~/plugins/lazyLoad.js', ssr: false },
        { src: '~/plugins/mask.js', ssr: false },
        { src: '~/plugins/toastr.js', ssr: false },
    ],


    buildModules: [
        '@nuxtjs/vuetify',
        '@nuxtjs/style-resources',
        'cookie-universal-nuxt'
    ],

    styleResources: {
        scss: './assets/scss/env.scss'
    },

    modules: ['@nuxtjs/axios', 'nuxt-i18n','vue-sweetalert2/nuxt', '@nuxtjs/auth-next', "bootstrap-vue/nuxt"],
    bootstrapVue: {
        bootstrapCSS: false, // here you can disable automatic bootstrapCSS in case you are loading it yourself using sass
        bootstrapVueCSS: false, // CSS that is specific to bootstrapVue components can also be disabled. That way you won't load css for modules that you don't use
       
    },

    i18n: {
        locales: [
            { code: 'en', file: 'en.json' },
        ],
        strategy: 'no_prefix',
        fallbackLocale: 'en',
        lazy: true,
        defaultLocale: 'en',
        langDir: 'lang/locales/'
    },

    router: {
        linkActiveClass: '',
        linkExactActiveClass: 'active',
    },
    server: {
        port: 8080, // default: 3000
        host: '0.0.0.0' // default: localhost 
        /// this one works fine , the digital ocean support team told me to do this.
    },
    auth: {
        strategies: {
          local: {
            token: {
              property: "token",
              global: true,
            },
            redirect: {
                "login": "/account/login",
                "logout": "/",
                "home": "/page/ajouter-produit",
                "callback": false
            },
            endpoints: {
              login: { url: "/login", method: "post" },
              logout: false, //  we don't have an endpoint for our logout in our API and we just remove the token from localstorage
              user:false
            }
          }
        }
      },
};

package.json 文件

{
    "name": "martfury_vue",
    "version": "1.3.0",
    "description": "Martfury - Multi-purpose Ecomerce template with vuejs",
    "author": "nouthemes",
    "private": true,
    "scripts": {
        "dev": "nuxt",
        "build": "nuxt build",
        "start": "nuxt start",
        "generate": "nuxt generate"
    },
    "config": {
        "nuxt": {
          "host": "0.0.0.0",
          "port": "8080"
        }
    },
}

服务器 index.js 配置

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose')
const cors = require('cors');
const url = 'mongodb+srv://****************************' // this works fine i manage to pull data from the cluster without a problem
const jwt = require('jsonwebtoken')


mongoose.connect(url, {useNewUrlParser:true}).then(()=>{
    const app = express();

    // middlleware
    app.use(express.json())
    app.use(cors());

    //products routes 
    const products = require('./product/product.router');
    app.use('/', products)
    //users routes
    const users = require('./user/user.router');
    app.use('/', users)
    const port = process.env.PORT || 8080;

    app.listen(port, () => console.log(`Server started on port ${port}`));
    }).catch(error => console.log(error.reason));
const con = mongoose.connection

con.on('open', () => {
    console.log('connected...')
})

这是我的 github 存储库和文件结构。服务器和 api 文件夹是 lokazz_api。

Answer 1

我建议您为此使用环境变量。

在您的项目中安装dotenv，然后在您的nuxt.config.js 文件中进行配置。

在你的根目录下创建一个.env文件，然后像这样设置一个键值对：

VUE_APP_BASE_URL="<value>"

请注意，您需要在密钥前加上 VUE_APP。

您的.env 应如下所示： VUE_APP_BASE_URL="http://localhost:8080/"

您可以将变量修改为：const baseDomain = process.env.BASE_URL;

记得在.gitignore文件中添加.env文件。

在您的数字海洋终端上，您可以使用touch .env 命令创建一个.env 文件，然后使用Vim 或Nano 修改该文件。

Answer 2

如果您的项目使用 .env 文件运行良好，那么它在生产环境中应该也能正常运行。

不要提交.env，而是瞄准您的 Digitalocean 仪表板并查看设置。您应该会看到一个可以输入配对然后继续的地方。

如图所示：https://docs.digitalocean.com/products/app-platform/how-to/use-environment-variables/#using-bindable-variables-within-environment-variables