快速發送Vue 2中的靜態文件App

由於不同的生產和開發結構，我在使用vue 2項目（webpack-simple模板）中的快速靜態數據服務時遇到問題。快速發送Vue 2中的靜態文件App

發展：本地主機/應用

生產：服務器/一些目錄/應用

一些目錄的變化往往因此被動態地設置在配置文件中。

我server.js的服務部分：

if (config.root !== '/') { 
    app.use(`/${config.root}`, express.static(path.join(__dirname))); 
} 

app.use('/dist', express.static(path.join(__dirname, 'dist')));

Transpiled JS文件在/ DIST文件夾中。

這是index.html文件充當應用程序的入口點：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>App Demo</title> 
    </head> 
    <body> 
    <div id="app"></div> 
    <script src="/dist/build.js"></script> 
    </body> 
</html>

它工作在發展，因爲應用程序是在根。

但在生產構建它不起作用，因爲應用程序從服務器子文件夾提供。

任何想法如何解決這個問題？

謝謝。

來源

2017-04-19 user2199236

但在生產構建它不起作用，因爲應用程序從服務器子文件夾提供。

「它不起作用」這句話告訴我們什麼，真的。什麼不行？你在客戶端上遇到錯誤嗎？服務器上出現錯誤？你得到404的HTML？ HTML是好的，但404的圖像？你沒有指定什麼是錯的，所以我只能給你一些一般的建議。

如果您創建了快速路由器：

const router = require('express').Router(); 
router.get('/a', ...); 
router.get('/b', ...); 
router.use('/c', express.static(...));

，那麼你就可以把你的整個應用程序在任何子路徑很容易：

app.use('/x', router);

其中/x是您需要的前綴。

但是，您還需要確保所有靜態資產（如HTML文件）不使用任何絕對路徑 - 例如，之類的東西：

<a href="https://stackoverflow.com/a/b/c.html">...</a> 
<script src="https://stackoverflow.com/a/b/c.js"></script>

，但只喜歡相對路徑：

<a href="b/c.html">...</a> 
<script src="../../a/b/c.js"></script>

等，如果你獨自離開你的應用程序和使用反向代理添加所需的路徑前綴也是如此 - 這你可以也不要搞亂你的節點代碼，在這種情況下可能會更容易。有關使用節點應用反向代理的詳細信息請參見這些問題：

來源

2017-04-19 09:42:24 rsp

這不起作用意味着它仍然從根網址獲取數據，而不是獲取靜態內容。我嘗試了你的解決方案，但沒有運氣。由於這是webpack模板應用程序，我需要使用絕對路徑，否則應用程序將無法找到轉發資源。例如：構建完成後，src =「../ assets/logo.png」將成爲src =「/ dist/logo.png」。是否有可能改變所有的鏈接有前綴/自定義目錄/使用節點或表達？ – user2199236

快速發送Vue 2中的靜態文件App

回答

相關問題