账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    docker下本地nginx 指向vue 中的public/index.html，项目没法跑起来?
    29
    0

    问题描述

    因为登入接口要携带cookie，所以后台要指定允许的域名，但是开发环境的域名不确定，然后我本地docker 中配了一个nginx，一开始入口指向的是dist/index.html,项目没问题，可以正常运行，然后我把入口改成了pubilc/index.html,项目就跑不起来了，也没有报错 就是一只转圈。

    问题出现的环境背景及自己尝试过哪些方法

    因为登入接口要携带cookie，所以后台要指定允许的域名，但是开发环境的域名不确定，然后我本地docker 中配了一个nginx，一开始入口指向的是dist/index.html,项目没问题，可以正常运行，然后我把入口改成了pubilc/index.html,项目就跑不起来了，也没有报错 就是一只转圈。

    相关代码

    pubilc/index.html

    <!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- <link rel="icon" href="<%= BASE_URL %>logo.png"> -->
    <title>管理后台</title>
    <style>#loading-mask{position:fixed;left:0;top:0;height:100%;width:100%;background:#fff;user-select:none;z-index:9999;overflow:hidden}.loading-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%)}.loading-dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:64px;width:64px;height:64px;box-sizing:border-box}.loading-dot i{width:22px;height:22px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.loading-dot i:nth-child(1){top:0;left:0}.loading-dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.loading-dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.loading-dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      <div id="loading-mask">
          <div class="loading-wrapper">
            <span class="loading-dot loading-dot-spin"><i></i><i></i><i></i><i></i></span>
          </div>
        </div>
    </div>
    <!-- built files will be auto injected -->
  </body>

</html>

    你期待的结果是什么？实际看到的错误信息又是什么？

    1
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得：提问者悬赏的 11 元积分
        全部回答
    • 共 0 条
    • ≈幸福的真殘忍 普通会员 1楼

      您可以尝试以下步骤解决这个问题：

      1. 首先，确保您的开发环境已经设置好。确保在您的开发环境中已经安装了Node.js、npm和yarn等工具。安装完成后，确保已经在您的项目中添加了以下依赖项：

      npm install express vue-router axios

      1. 在项目的package.json文件中添加以下代码，以便使用Vue Router来管理应用的路由：

      "scripts": { "start": "vue serve", "build": "vue build", "start-dev": "vue run dev", "start-prod": "vue run production" },

      这将创建一个名为dev和prod的目录，分别用于开发和生产环境。

      1. 将您的Vue应用部署到Docker容器中。您可以在Dockerfile中使用以下命令将您的应用部署到容器中：

      ``` FROM node:14

      WORKDIR /usr/src/app

      COPY package*.json ./

      RUN npm install

      COPY . .

      CMD ["npm", "start"] ```

      这将创建一个名为main的目录，其中包含您的应用代码。然后，您可以使用以下命令将容器启动：

      docker run -d --name my-app -p 3000:3000 -e development=true my-app

      这将启动一个名为my-app的容器，其中监听3000端口，并将容器的IP地址设置为192.168.1.100。如果您的开发环境设置为development，则容器将启动在开发模式下。

      1. 在您的本地服务器上运行npm run dev或npm run build命令。这将启动容器，将其部署到Docker，并启动您的开发环境。

      2. 运行以下命令以启动生产环境：

      docker run -d --name my-app -p 8080:8080 my-app

      这将启动一个名为my-app的容器，其中监听8080端口，并将容器的IP地址设置为192.168.1.101。

      现在，您的Vue应用应该已经可以正常工作了。如果您仍然遇到问题，请检查您的Dockerfile以及您的网络设置。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部