如何将vue项目放到服务器

Ⅰ vuejs怎么在服务器部署

既然是布署，哪默认就应该是生产环境下的布署，vue开发的应用本质上就是静态文件,无论你用何种web服务器，放上去就应该能通过http访问

接下来我来帮大家来捋一捋

首先VUE 是一个javascript的前端框架，注定了它是运行在浏览器里的，对服务器本地没有任何要求，只要一个静态文件服务器能通过http访问到其资源文件就足矣！无论你是用apache ,ngnix 就算你要用node 自己实现一个静态文件服务器，也用不了多少行代码。

npm run dev 是用来在本地开发的时候做调试用的，vue开发的是前端的东西，不是nodejs 服务端程序，按道理讲，生产环境里就不该存在npm，甚至nodejs也不需要（用nodejs来做web静态服务的除外），楼主通过ssh进入到服务器里，再运行npm run dev 来启动哪是开发机上做的事情。正确的做法很简单，通过npm run build 把生成的dist文件夹（不要上传文件夹）里的内容上传到http服务器上就可以通过 http来访问了，开发机上正常，上传以后 程序出现错误不能运行的原因99.99%的可能性是你引用资源的路径有问题。

一般如果vue框架的程序上传到网站服务器的根目录下是不 会有问题的，也不存在资源文件引用错误的情况，但如果你不是根目录，就会有问题，通过vue-cli 生成的开发目录，build以后默认引用资源文件的路径是

有更多疑问 ”可以咨询 ”小鸟云，它是的一家服务器厂商，我一直在用他们产品！

Ⅱ 怎么将项目上传到服务器

传文件都是FTP传的，可以在服务器上安装一个宝塔面板，可视化的，非常好用的。

Ⅲ vue修改之后先Git-push在打包到服务器吗

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

[plain]view plain

• cd/etc

• apt-getupdate

• apt-getinstallnginx

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

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

[plain]view plain

• vim/etc/nginx/nginx.conf

在nginx.conf中配置如下：

[plain]view plain

• userwww-data;

• worker_processesauto;

• pid/run/nginx.pid;

• events{

• worker_connections768;

• #multi_accepton;

• }

• http{

• ##

• #BasicSettings

• ##

• tcp_nodelayon;

• keepalive_timeout65;

• types_hash_max_size2048;

• #server_tokensoff;

• #server_names_hash_bucket_size64;

• #server_name_in_redirectoff;

• include/etc/nginx/mime.types;

• default_typeapplication/octet-stream;

• ##

• #SSLSettings

• ##

• ssl_protocolsTLSv1TLSv1.1TLSv1.2;#DroppingSSLv3,ref:POODLE

• ssl_prefer_server_cipherson;

• ##

• #LoggingSettings

• ##

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

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

• ##

• #GzipSettings

• ##

• gzipon;

• gzip_disable"msie6";

• #gzip_varyon;

• #gzip_proxiedany;

• #gzip_comp_level6;

• #gzip_buffers168k;

• #gzip_http_version1.1;

• ##

• #VirtualHostConfigs

• ##

• gzipon;

• gzip_disable"msie6";

• #gzip_varyon;

• #gzip_proxiedany;

• #gzip_comp_level6;

• #gzip_buffers168k;

• #gzip_http_version1.1;

• #gzip_typestext/plaintext/cssapplication/jsonapplication/javascripttext/xmlapplication/xmlapplication/xml+rsstext/javascript;

• ##

• #VirtualHostConfigs

• ##

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

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

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

• server{

• listen80;

• server_nameyour-ipaddress;

• root/home/my-project/;

• indexindex.html;

• location/datas{

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

• includeuwsgi_params;

• proxy_passhttp://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

• assetsPublicPath:'/test1/',

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

[javascript]view plain

• exportdefaultnewRouter({

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

• linkActiveClass:'active',

• routes

• });

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

[javascript]view plain

• consturl='/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

• servicenginxstart

9.至此项目部署成功即可

Ⅳ Vue项目部署到Tomcat上面

你现在的这个情况是通过vue打包后，build之后的产物。

先不多说，直接说方法，最后再解释。

想运行在tomcat上，先在打包之前做一下配置：

首先在config文件夹下找到index.js修改一下当前路径

把assetsPublicPath：‘/’改成assetsPublicPath：‘./‘

对就是/前面加个点儿。

然后重新打包。就可以直接打开了。

======================================

为什么这样做呢，因为vue的打包默认形成的是一个部署在服务器环境上的文件，如果是部署在静态站点上（express或者阿帕奇），就需要做路径转变。其实算是个小tip。

欢迎追问。

Ⅳ vuejs怎么在服务器部署

通过vue-cli搭建的基于webpack结构的工程项目
1、build前的配置，防止js、css文件路径错误
在目录build下面找到webpack.prod.conf.js文件，找到output节点，添加【publicPath:'./'】
2、执行命令【npm run build】build项目
3、在跟目录下会生成dist目录，里面的内容就是构建的结果，包含html、css、js文件等
4、将构建结果dist目录下面的内容放在nginx的发布目录【/usr/share/nginx/html/vuedemo】中
5、通过http://172.10.10.69/vuedemo/访问测试

Ⅵ 如何把本地项目部署到服务器上

把本地项目部署到服务器上方法比较多，这里以javaee项目为例：

1. 把项目打包成zip，FTP上传到生产服务器tomcat的webapps目录下解压；

2. 本地修改好的文件，立即FTP上传到生产服务器对应的目录；

3. 生产服务器安装svn服务，在本地把修改过的文件commit，然后生产服务器update。

拓展资料：

服务器，也称服务器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。

服务器的构成包括处理器、硬盘、内存、系统总线等，和通用的计算机架构类似，但是由于需要提供高可靠的服务，因此在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面要求较高。

在网络环境下，根据服务器提供的服务类型不同，分为文件服务器，数据库服务器，应用程序服务器，WEB服务器等。

按应用层次划分通常也称为“按服务器档次划分”或 “按网络规模”分，是服务器最为普遍的一种划分方法，它主要根据服务器在网络中应用的层次（或服务器的档次来）来划分的。要注意的是这里所指的服务器档次并不是按服务器CPU主频高低来划分，而是依据整个服务器的综合性能，特别是所采用的一些服务器专用技术来衡量的。按这种划分方法，服务器可分为：入门级服务器、工作组级服务器、部门级服务器、企业级服务器。

服务器—网络

Ⅶ 如何打包vue项目加node.js后端到云服务器

在命令行输入npm run build:prod，等待打包完成

项目目录下就会多出一个dist文件夹，里面有index.html文件和static文件夹，
直接上传到服务器上就行了

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

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

[plain]view plain

• cd/etc

• apt-getupdate

• apt-getinstallnginx

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

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

[plain]view plain

• vim/etc/nginx/nginx.conf

在nginx.conf中配置如下：

[plain]view plain

• userwww-data;

• worker_processesauto;

• pid/run/nginx.pid;

• events{

• worker_connections768;

• #multi_accepton;

• }

• http{

• ##

• #BasicSettings

• ##

• tcp_nodelayon;

• keepalive_timeout65;

• types_hash_max_size2048;

• #server_tokensoff;

• #server_names_hash_bucket_size64;

• #server_name_in_redirectoff;

• include/etc/nginx/mime.types;

• default_typeapplication/octet-stream;

• ##

• #SSLSettings

• ##

• ssl_protocolsTLSv1TLSv1.1TLSv1.2;#DroppingSSLv3,ref:POODLE

• ssl_prefer_server_cipherson;

• ##

• #LoggingSettings

• ##

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

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

• ##

• #GzipSettings

• ##

• gzipon;

• gzip_disable"msie6";

• #gzip_varyon;

• #gzip_proxiedany;

• #gzip_comp_level6;

• #gzip_buffers168k;

• #gzip_http_version1.1;

• ##

• #VirtualHostConfigs

• ##

• gzipon;

• gzip_disable"msie6";

• #gzip_varyon;

• #gzip_proxiedany;

• #gzip_comp_level6;

• #gzip_buffers168k;

• #gzip_http_version1.1;

• #gzip_typestext/plaintext/cssapplication/jsonapplication/javascripttext/xmlapplication/xmlapplication/xml+rsstext/javascript;

• ##

• #VirtualHostConfigs

• ##

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

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

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

• server{

• listen80;

• server_nameyour-ipaddress;

• root/home/my-project/;

• indexindex.html;

• location/datas{

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

• includeuwsgi_params;

• proxy_passhttp://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

• assetsPublicPath:'/test1/',

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

[javascript]view plain

• exportdefaultnewRouter({

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

• linkActiveClass:'active',

• routes

• });

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

[javascript]view plain

• consturl='/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

• servicenginxstart

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

Ⅸ vue项目要部署在服务器上，那么服务器需要安装node.js环境吗

最好是安装一个。
1.如果你仅仅是打包好的vue相机，那么要看服务端使用的是什么语言，如果是node的话，肯定要安装node环境的，但是如果不是node，那么就没有必要了。
2.如果你想在服务端跑vue的项目，也就是在远程端做开发工作，那么肯定是要安装node的，毕竟vue开发环境需要node。
基本上服务端也就这两种需求，node包其实很小，安装一个也不费事，还可以方便开发，我觉得在远程端按一个最好。