前端dist如何部署到服务器

㈠ 怎么把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 即可

㈡ 前端通过gulp编译后的文件，怎么部署到服务器

服务器上写部署脚本，从代码库里拉项目代码，跑gulp自动化。或者打包传给后端让他搞。

㈢ 一个前端页面如何部署

一个前端页面，在本地直接打开就能访问。另外如果是要放到服务器下的话，可以装个nginx，或者apache，或者tomcat，直接放到网页路径下，就行。

㈣ webpack打包后的代码，如何部署到服务器上

本文章前端代码是基于vue+webpack开发的

Nginx是一款轻量级的Web 服务器/反向代理服务器

首先，webpack配置如下

在开发过程中，我们是通过npm run dev在开发环境中运行代码
如果要部署到生产环境中，可以运行npm run build进行上线打包

打包完成后，会发现项目中多了dist这个文件夹

执行结果和webpack的配置文件一致。

代码被webpack打包完成后下一步就是部署到服务器上，此文仅适合于前端代码是部署在windows操作系统的nginx服务中。
这里假设：
Windows操作系统：windows server 2008 64位
Nginx服务：nginx-1.12.2 64位

1.下载nginx-1.12.2 64位解压，假设nginx-1.12.2放在D:nginx-1.12.2目录中，nginx目录结构。如图下

2、前端代码放在D:nginx-1.12.2html目录中，dist目录就是刚刚前端打包完的代码。如图下

3、在D:nginx-1.12.2conf目录中，有个nginx.conf配置文件，进行编辑这个文件

4、假设前端的端口号为8082，如果端口号被占用，请修改为其它端口号。后台服务访问地址http://192.168.121.**:8080,

5、打开cmd控制台，进入目录D:nginx-1.12.2中，用start nginx命令启动服务，然后用tasklist /fi "imagename eq nginx.exe"，查看nginx服务是否启动。

4、如果改变配置文件时，需要用nginx -s reload 命令重启nginx工作进程。

5、关闭服务
nginx -s stop
nginx -s quit 安全关闭
taskkill /F /IM nginx.exe > nul 关闭所有nginx服务

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

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

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

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

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

拓展资料：

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

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

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

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

服务器—网络

㈥ 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以后默认引用资源文件的路径是

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

㈦ 前端的代码怎么部署到服务器

1、安装护卫神主机大师，一键配置全能网站环境
2、用主机大师开设网站，并绑定域名
3、解析域名到服务器IP
4、FTP上传前端代码到服务器
5、输入域名即可访问前端代码了

㈧ 怎么把python部署到服务器

使用pip或easy_install可以管理和安装python的package包，实际上它们都是从pypi服务器中搜索和下载package的。目前在pypi服务器上，有超过三万多个package，同时还允许我们将自己的代码也上传发布到服务器上。这样，世界上的所有人都能使用pip或easy_install来下载使用我们的代码了。

具体步骤如下：

首先创建项目文件和setup文件。

目录文件结构如下：

project/
simpletest/
__init__.py
test.py
setup.py

假设项目文件只有一个simpletest包，里面有一个test.py文件。

创建的setup.py文件格式大致如下，其中，install_requires字段可以列出依赖的包信息，用户使用pip或easy_install安装时会自动下载依赖的包。详细的格式参考文档。

from setuptools import setup, find_packages

setup(
name = 'simpletest',
version = '0.0.1',
keywords = ('simple', 'test'),
description = 'just a simple test',
license = 'MIT License',
install_requires = ['simplejson>=1.1'],

author = 'yjx',
author_email = '[email protected]',

packages = find_packages(),
platforms = 'any',
)

然后将代码打包。

打包只需要执行python
setup.py xxx命令即可，其中xxx是打包格式的选项，如下：

# 以下所有生成文件将在当前路径下 dist 目录中
python setup.py bdist_egg # 生成easy_install支持的格式
python setup.py sdist # 生成pip支持的格式，下文以此为例

发布到pypi。

发布到pypi首先需要注册一个账号，然后进行如下两步：

注册package。输入python setup.py register。
上传文件。输入python setup.py sdist upload。

安装测试

上传成功后，就可以使用pip来下载安装了。

另外，pypi还有一个测试服务器，可以在这个测试服务器上做测试，测试的时候需要给命令指定额外的"-r"或"-i"选项，如python
setup.py register -r "",python
setup.py sdist upload -r "",pip
install -i "" simpletest。

发布到测试服务器的时候，建议在linux或cygwin中发布，如果是在windows中，参考文档，需要生成.pypirc文件

㈨ 前后端分离的前端是怎么部署到生产环境中的，直接通过 nginx 吗

front-end-separate(前后端分离脚手架)

front-end-separate
一个前后端分离的脚手架工具（自主研发）
为什么选择grunt而不是gulp
如果你也和我一样喜欢grunt这种配置的方式，那么我相信这个脚手架觉对十分适合你
所有静态资源都md5全并压缩打包,css,js,img,html
已在生产环境验证
基于express和grunt的前后端分离框架
模板引擎使用的是nunjucks，好处是可以实现模版继承，又不像jade一样把html标签都简化了
express提供路由服务
项目中app为原代码文件（开发用），dist为打包后的文件（用于线上）
开发使用app，线上使用dist，支持一键cdn部署，加速你的项目
项目启动时，修改任何express代码，可以实现自动重启–基于nodemon
支持sass图片精灵（自动打包精灵图片，再也不用手动去拼凑了）
基于grunt md5 打包合并
线上输出的html已经压缩成一行（让你的代码更有Geeker范）

㈩ 如何把项目部署到远程服务器上

步骤如下：
1、确保项目在MyEclipse上能够正常运行。
2、在Tomcat安装目录下的webapp目录中新建一个文件夹。
3、将META-INF文件夹、WEB-INF文件夹及所有的前端代码复制到第2步新建的文件夹中。
4、将build中的classes文件夹复制到WEB-INF文件夹中。
5、启动Tomcat即可访问，外网使用IP+端口也可以访问。