怎么把VUE项目部署到服务器上面

asp项目怎么部署到服务器里面去？~

1、Visual Studio 使用您在项目“属性”页的“打包/发布 Web”选项卡中创建的设置，确定放入部署包中的内容。 下图显示了“打包/发布 Web”选项卡。

在“打包/发布 SQL”选项卡上输入影响包创建的数据库相关设置，本主题后面将对此进行描述。
利用这两个选项卡，可以更新最常用的设置。 其他不常使用的设置存储在 Visual Studio 项目文件（.csproj 或 .vbproj）中，可以通过直接编辑该文件进行更改。
创建部署包
可以通过以下方式创建包：
使用 Visual Studio 中的工具。
直接从命令行使用 MSBuild 命令。
间接从 PowerShell 或 Team Build 使用 MSBuild 命令。
安装部署包
创建部署包之后，将其安装在目标计算机上。 Web 部署使用包中的信息来配置 IIS、设置数据库、创建文件夹结构并将文件复制到其中，以及执行部署应用程序所需的任何其他操作。
2、可以通过以下方式安装包：
从命令行使用 Web 部署。
使用 Visual Studio 创建的 .cmd 文件，该文件包含安装包的 Web 部署命令。 Web 部署命令可以长而复杂，提供此文件是为了便于从命令行安装包。
使用 IIS 管理器。
使用 PowerShell 执行 Web 部署命令。
可以在创建包时在其中包括参数。 这些是名称/值对，在创建包时将为其提供默认值，但在安装包时可以为其提供新值。 如果使用 IIS 管理器来安装包，则将使用文本框显示参数名称，以便您可以输入新值。 如果您通过从命令行使用 Web 部署进行安装，则可以在 XML 文件中指定参数值。
包文件夹的位置和内容
默认情况下，Visual Studio 将在由 MSBuild IntermediateOutputPath 属性标识的文件夹中生成部署包。IntermediateOutputPath 属性引用项目的 obj\配置 文件夹，如下图的“解决方案资源管理器”窗口中所示：

3、一键发布：
也可以使用 Visual Studio 的一键式发布功能，以远程方式进行部署。 在这种情况下，您将在发布配置文件中指定 Visual Studio 应如何在何处部署应用程序。 下图显示“发布配置文件”对话框。

一、前言
前面我们已经尝过了在云服务器上部署代码的甜头了，现在主菜就要上场了，那就是将我们的 JavaWeb 项目部署到云服务器上。兴奋吧？淡定淡定~
二、项目部署
我们对于 Java Web 项目在本地机器(无论是 Windows 还是 Linux)上的部署已经了然于心了，那么对于在云服务器上部署 Java Web 项目又是如何操作的呢？ 其实很简单，还是离不开 Web 项目部署的那三点：① 基础的 JDK 环境② 一个 Web 服务器。如 Tomcat、JBoss③ 一款数据库。如：mysql
对于云服务器上 Java Web 项目的部署，和平时在 Windows、Linux 下部署是一样的。最多也就是只能使用纯命令模式来操作而已，其实过程都一样。
2.1 环境准备
既然是 Java Web 项目的部署，首先自然需要配置好相关的环境罗。也就是：先在云主机上搭建好 Java 开发环境，如 OpenJDK 的安装、Tomcat 的安装、Mysql 数据库的安装。
2.2 项目部署
我们要部署 Java Web 项目，那就至少得将项目上传到云服务器。其实过程很简单，基本上也就是下面三个步骤：① 打包上传：将项目打包成 war 文件，然后利用传到远程服务器（在Eclipse中直接将项目导出为.war文件）。② 将 war 文件移动到 Tomcat 目录下的 webapps 下。③ 重启 Tomcat，访问我们的项目。
在这个过程中，我们需要注意。因为一般而已，作为一个 Web 项目，我们肯定是有数据库的使用的。那么数据库部分怎么办呢？其实，只需要将我们已有的数据库转储为 sql 文件，然后将 sql 文件上传到云服务器上执行即可。以 mysql 为例，如下操作：
① 转储为 sql 脚本，并上传：先在本地将我们项目使用的数据库转为 sql 文件，上传到云服务器上 （可以利用 Navicat 将数据库转储为.sql文件）。② 执行 sql：然后进入 mysql 中执行该 sql 文件。（若服务器装有Navicat，可直接用Navicat执行.sql文件，执行前需要选中存放表的数据库，应该与代码中数据库连接语句包含的数据库名保持一致）

1.使用xshell登录到阿里云服务器。安装nginx（本文安装到/etc下）

[plain] view plain copy

• cd /etc  

• apt-get update  

• apt-get install nginx  

2.首先先配置nginx，然后再根据配置文件做下一步操作

打开/etc/nginx/nginx.conf文件

[plain] view plain copy

• vim /etc/nginx/nginx.conf  

在nginx.conf中配置如下：

[plain] view plain copy

• user www-data;  

• worker_processes auto;  

• pid /run/nginx.pid;  

• events {  

•         worker_connections 768;  

•         # multi_accept on;  

• }  

• http {  

•   

•         ##  

•         # Basic Settings  

•         ##  

•   

•         tcp_nodelay on;  

•         keepalive_timeout 65;  

•         types_hash_max_size 2048;  

•         # server_tokens off;  

•   

•         # server_names_hash_bucket_size 64;  

•         # server_name_in_redirect off;  

•   

•         include /etc/nginx/mime.types;  

•         default_type application/octet-stream;  

•   

•         ##  

•         # SSL Settings  

•         ##  

•   

•         ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE  

•         ssl_prefer_server_ciphers on;  

•   

•         ##  

•         # Logging Settings  

•         ##  

•   

•         access_log /var/log/nginx/access.log;  

•         error_log /var/log/nginx/error.log;  

•   

•         ##  

•         # Gzip Settings  

•         ##  

•   

•         gzip on;  

•         gzip_disable "msie6";  

•   

•         # gzip_vary on;  

•         # gzip_proxied any;  

•         # gzip_comp_level 6;  

•         # gzip_buffers 16 8k;  

•         # gzip_http_version 1.1;  

•   

•         ##  

•         # Virtual Host Configs  

•         ##  

•   

•   

•         gzip on;  

•         gzip_disable "msie6";  

•   

•         # gzip_vary on;  

•         # gzip_proxied any;  

•         # gzip_comp_level 6;  

•         # gzip_buffers 16 8k;  

•         # gzip_http_version 1.1;  

•         # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;  

•   

•         ##  

•         # Virtual Host Configs  

•         ##  

•   

•         include /etc/nginx/conf.d/*.conf;  

•         include /etc/nginx/sites-enabled/*;  

•         #以下为我们添加的内容  

•        server {               

•               listen 80;  

•               server_name your-ipaddress;  

•   

•               root /home/my-project/;  

•               index index.html;  

•               location /datas {  

•               rewrite ^.+datas/?(.*)$ /$1 break;  

•               include uwsgi_params;  

•               proxy_pass http://ip:port;  

•                               }  

•              }  

• }  

接下来就根据配置文件进行下一步工作。配置文件中的server_name后面是阿里云服务器的ip地址

3.配置文件中的listen是nginx监听的端口号，所以需要在阿里云服务器上为80端口添加安全组规则

在本地的浏览器登录阿里云服务器->进入控制台->点击安全组->点击配置规则->点击添加安全组规则，之后配置如下（注：入方向和出方向都要配置）




4.配置文件中的root和index那两行表示我们把项目文件夹放在/home/my-project下

例如有两个项目文件夹分别为test1，test2，里面都有index.html。则目录结构如下

/home

       |--my-project

              |--test1

                      |--index.html

              |--test2

                      |--index.html

则在浏览器输入http://ip/test1/index.html

服务器便会在/home/my-project中找到test1下的index.html执行；

如果在浏览器中输入http://ip/test2/index.html

服务器便会在/home/my-project中找到test2下的index.html执行；

这样便可以在服务器下放多个项目文件夹。

5.所以我们也需要在本地项目的config/index.js里的build下进行修改,如果要把项目放到test1下，则

[javascript] view plain copy

• assetsPublicPath: '/test1/',  

如果用到了vue-router，则修改/router/index.js

[javascript] view plain copy

• export default new Router({  

•   base: '/test1/',   //添加这行  

•   linkActiveClass: 'active',  

•   routes  

• });  

6.nginx配置文件中的location则是针对跨域处理，表示把对/datas的请求转发给http://ip:port,本文中这个http://ip:port下就是需要的数据，例如http://ip:port/seller,在本地项目文件中ajax请求数据的地方如下

[javascript] view plain copy

• const url = '/datas/seller';  

• this.$http.get(url).then((response) => {  

•   .....  

• });  

7.修改后在本地命令行下运行:cnpm run build 生成dist文件。把dist文件里的index.html和static文件上传到服务器的/home/my-project/test1下，目录结构如下

/home

       |--my-project

              |--test1

                      |--index.html

                      |--static


8.启动nginx

[plain] view plain copy

• service nginx start  

9.至此项目部署成功，在浏览器下输入:  http://ip/test1/index.html  即可



     


      

---

芮城县15051582652： vuejs怎么在服务器部署 - ？
华诞孟鲁： 既然是布署,哪默认就应该是生产环境下的布署,vue开发的应用本质上就是静态文件,无论你用何种web服务器,放上去就应该能通过http访问 接下来我来帮大家来捋一捋 首先VUE 是一个javascript的前端框架,注定了它是运行在浏览器里的,...

芮城县15051582652： Vue项目部署到Tomcat上面 - ？
华诞孟鲁： 你现在的这个情况是通过vue打包后,build之后的产物. 先不多说,直接说方法,最后再解释. 想运行在tomcat上,先在打包之前做一下配置: 首先在config文件夹下找到index.js修改一下当前路径把assetsPublicPath:'/'改成assetsPublicPath:'./' 对就是/前面加个点儿. 然后重新打包.就可以直接打开了. ====================================== 为什么这样做呢,因为vue的打包默认形成的是一个部署在服务器环境上的文件,如果是部署在静态站点上(express或者阿帕奇),就需要做路径转变.其实算是个小tip. 欢迎追问.

芮城县15051582652： vuejs构建单页应用,服务端该怎么部署 - ？
华诞孟鲁： 首先安装 vue-cli npm install -g vue-cli 注:Node.js >= 4.x, 5.x 最好 初始化应用 vue init webpack vue-notes-app cd vue-notes-app npm install // 安装依赖包 npm run dev // 启动服务 初始化一个项目名为vue-notes-app的应用,并选择使用...

芮城县15051582652： vuejs怎么部署到阿里云linux - ？
华诞孟鲁： 这个问题可以用代理对你的项目进行长期的维护.我现在在用的就是pm2,你可以先安装他,然后去pm2 start XXX(项目名) 之后你关掉了ssh也是可以跑起来的.

芮城县15051582652： 如何在webstorm下调试vue工程 - ？
华诞孟鲁： git clone下来,直接用webstorm打开

芮城县15051582652： nodejs怎么部署到服务器上 - ？
华诞孟鲁： 服务器推荐用nginx,配置简单,性能强悍.nginx可以使用代理访问后端的Node.js应用服务器.配置方法:1)在配置文件http段内容添加后端服务器:http {#添加后端服务器,和nginx负载均衡配置一样 upstream nodejs { server 127.0.0.1:8080;

芮城县15051582652： 项目上线时Vue部署在服务器哪个目录,是否有空间限制 - ？
华诞孟鲁： 不会又什么限制.让后台告诉你放入之后的url直接index.html访问就可以

芮城县15051582652： 如何把项目部署到远程服务器上 - ？
华诞孟鲁： 步骤如下: 1、确保项目在MyEclipse上能够正常运行. 2、在Tomcat安装目录下的webapp目录中新建一个文件夹. 3、将META-INF文件夹、WEB-INF文件夹及所有的前端代码复制到第2步新建的文件夹中. 4、将build中的classes文件夹复制到WEB-INF文件夹中. 5、启动Tomcat即可访问,外网使用IP+端口也可以访问.

芮城县15051582652： 如何把项目布置到自己电脑服务器上 - ？
华诞孟鲁： 把项目放进目录,新建一个网站,将网页根目录指定过去,然后换一个端口监听,不用80 访问的时候加上端口 0.0.0.0:port

芮城县15051582652： 想请问下,如何把一个开源项目部署到公司的服务器上?在线等 - ？
华诞孟鲁： 新建个web项目 复制进去就行了