vuejs怎么在服务器部署

Posted 2023-03-24

用vue-cli搭建的做法
1、npm run build
2、把dist里的文件打包上传至服务器 例 /data/www/，我一般把index.html放在static里
所以我的文件路径为：

/data/www/static
|-----index.html
|-----js
|-----css
|-----images
....

3、配置nginx监听80端口， location /static alias 到 /data/www/static，重启nginx
location /static
alias /data/www/static/;

4、浏览器访问http://ip/static/index.html即可 参考技术A 简单项目启动的话一般在1秒左右
你打开tomcat目录看看webapp里面有没有你的项目文件夹就知道了，你用的myeclipse的话，部署很简单，在服务器图标左侧有个部署按钮，把项目add到服务器里就可以了

如何将 vuejs 项目部署到 heroku

【中文标题】如何将 vuejs 项目部署到 heroku

【英文标题】：How to deploy a vuejs project to heroku

【发布时间】：2018-02-17 13:11:33

【问题描述】：

我正在本地处理这个项目https://github.com/misterGF/CoPilot，但现在它已经完成了，我想把它推送到heroku。问题是告诉heroku 启动应用程序。

在 heroku 示例中，演示服务器在从 Procfile 获取包含此数据的信息后运行

web: node index.js

但是在我的 vuejs 项目中，没有 index.js 为内容提供服务。

我只有 index.html 的主要入口点，而 procfile 不适用于 HTML。

【问题讨论】：

感谢 git repo，我正在寻找这样的东西。

@bhansa 另一个不错的是Quasar。实际上，我上个月从 CoPilot 搬到了 quasar，并没有后悔。

【参考方案1】：

您还需要定义一个小型静态服务器来为您的index.html 文件提供服务。 一个简单的示例设置是http-server:

npm install -S http-server

你的Procfile 变成：

web: http-server ./ -p $PORT

【讨论】：

嗯，我试过你的答案，我得到`'http-server' is not Recognized as an internal or external command，`你知道可能出了什么问题吗？

当前的答案无法解决问题，所以我放了一个赏金

您是否正确安装了http-server？它是否显示在您的 package.json 文件中的 dependencies 下？另外，您可以在自己的机器上本地运行命令http-server ./ -p 8080 吗？

是的，一切都安装正确。我收到error module semver 未找到...我不知道是什么问题

它在本地运行吗？您还可以发布您的 Node 和 npm 版本吗？另外，也许这个 npm 问题与github.com/npm/npm/issues/15558

有关

【参考方案2】：

您需要更新您的 package.json 文件以让 heroku 了解这些软件包，例如，如果您使用 express 来提供您的文件：

"scripts": 
   "postinstall": "npm install express"
 
 // "start": "node server.js" (executing server.js) during start

server.js

var express = require('express')
var path = require('path')
var serveStatic = require('serve-static')

var app = express()
app.use(serveStatic(path.join(__dirname, 'dist')))

var port = process.env.PORT || 8000
app.listen(port)
console.log('server started ' + port)

别忘了构建。

在这里阅读更多关于构建配置的信息：Customizing build process - Heroku

如果可以的话，您也可以像这样全局安装 http-server：

npm install -g http-server

并更新 Procfile 以添加上述答案中提到的配置。

只知道：

npm install

将安装“依赖项”和“devDependencies” npm install --

production

只会安装“依赖项” npm install --

dev

只会安装“devDependencies”

【参考方案3】：

使用http-server。但是该软件包并未全局安装，因此您必须像这样使用它的完整路径：

web: ./node_modules/http-server/bin/http-server ./ -p $PORT