快速发送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

回答

相关问题