主页 / 问题 / 1503341
Accepted
Константин Сингалов
Asked:2023-03-09 15:17:51 +0000 UTC2023-03-09 15:17:51 +0000 UTC

laravel+vueJS项目迁移到托管的问题

  • 772

我寻求帮助，我尝试了我在互联网上找到的所有东西，但显然我在某个地方犯了错误。我第一次将 VueJS 站点上传到托管。Laravel 9 + VueJS（使用 vite）。我家用电脑上的一切都很好，我正在将它转移到主机上——laravel 部分一切都很好（我不得不稍微修复资产 .htaccess），但问题出在 VueJS 上。

首先，我将描述代码的要点。Blade.php 使用 @vite(['resources/css/app.css', 'resources/js/app.js'])

在.envAPP_URL=https://сайт.ru

在 vite.config.js 中

import laravel from 'laravel-vite-plugin';
import path from 'path'
import vue from "@vitejs/plugin-vue";

export default defineConfig({       
    plugins: [
        vue(),
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
        }
    },

在 packaje.json 中

    "private": true,
    "scripts": {
        "dev": "vite --host",
        "build": "vite build"
    },
    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "axios": "^1.3.4",
        "bootstrap": "^5.2.1",
        "laravel-vite-plugin": "^0.7.4",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "sass": "^1.32.11",
        "vite": "^4.0.0"
    },
    "dependencies": {
        "@vitejs/plugin-basic-ssl": "^1.0.1",
        "@vitejs/plugin-vue": "^4.0.0",
        "vue": "^3.2.36",
        "vue-loader": "^17.0.1",
        "vue-router": "^4.1.6"
    }
}

在 .htaccess 中

 
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(.+) $1 [L]
 
RewriteCond %{DOCUMENT_ROOT}/public%{REQUEST_URI} -f
RewriteRule ^(.+) /public/$1 [L]
 
Options +SymLinksIfOwnerMatch
RewriteRule ^(.*)$ /public/ [QSA,L]

我运行 npm run dev


  ➜  Local:   http://localhost:5173/
  ➜  Network: http://88.212.236.252:5173/
  *и ещё 8 ip-шек с этим портом*

  LARAVEL v9.48.0  plugin v0.7.4

  ➜  APP_URL: https://сайт.ru/

我去网站，我得到 3 个类似的错误：

 Mixed Content: The page at 'https://сайт.ru/posts/1' was loaded over HTTPS, 
but requested an insecure script 'http://[::]:5173/resources/js/app.js'. 
This request has been blocked; the content must be served over HTTPS.

文件问题：5173/@vite/client，：5173/resources/css/app.css，：5173/resources/js/app.js。

我将它添加到 vite.config.js

        host: '127.0.0.1',  
    },

没有变化

我在 vite.config.js 中改变了这个

server: {
        https: true,
        hmr : {
            host: 'сайт.ru'
        },

    },

50 秒后我得到相同文件的 3 个错误，但带有 RR_CONNECTION_TIMED_OUT。我添加端口：3000（以及各种 3001、5147） 我尝试将主机更改为托管地址 - 83.219.286.277 - 还有 ERR_CONNECTION_TIMED_OUT。

我改成

  server: {
    hmr: {
        host: 'localhost',
    },
  },

我收到

client.ts:48 [vite] failed to connect to websocket.
your current setup:
  (browser) localhost:5173/ <--[HTTP]--> localhost:5173/ (server)
  (browser) localhost:5173/ <--[WebSocket (failing)]--> localhost:5173/ (server)
Check out your Vite / network configuration and https://vitejs.dev/config/server-options.html#server-hmr .

如果我手动将 public/hot 中的端口更改为： 443 ，然后 GET ``` http://localhost:443/resources/css/app.css net::ERR_CONNECTION_REFUSED（npm run build launched ..）

Если вручную меняю в public/hot на https://сайт.ru:443 , то
``` GET https://сайт.ru/@vite/client net::ERR_ABORTED 404
2:1 Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".
laravel

1 个回答

  1. Best Answer

    问题解决了。正确答案是设置

    服务器：{ https: true, hmr: { host: 'site.ru', }, },

    并且有必要将 .env 文件中的 APP_URL=https://site.ru/ 更改为 APP_URL=https://site.ru 也许，当然，代理也有帮助，我不知道，但是谢谢，问题已解决。

    • 0

相关问题