前端怎么打包部署到服务器

㈠ 一个前端页面如何部署

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

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

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

㈢ 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服务

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

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

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

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

㈥ 我是个前端，公司让我搭建服务器，如何弄

公司让我搭建服务器，这个说来也简单，如果是专业的数据中心托管服务器，会帮你搭建系统，配置环境。我们的数据中心就是这样，工程师可以协助用户搭建环境，上传应用，都是免费服务。

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

㈧ web前端项目部署到服务器：

执行成功后会生成dist文件

4.1 进入到nginx配置目录：/usr/local/nginx/conf,对 nginx.conf 文件进行配置

使用include可以配置多个.conf文件，如一个项目一个配置文件。在同目录下创建demo文件夹，并创建demo.conf配置文件

下面使用是以ip地址的方式创建的的配置文件

访问地址：

其中dist名称时可以修改，保持与/usr/local/nginx/html下cp名称一致，否则会访问不到;并且/usr/local/nginx/html目录可存在同一ip下多个web项目。

域名与ip绑定

配置域名demo.conf
eg: 域名 - demo.cn

4.2阿里云配置域名前缀
阿里云->域名->域名列表—>域名 管理-> 域名解析->解析设置

如图：记录值 填写当前服务ip

学习过程中所记录，有问题或者有好的方式欢迎指点。不胜感激 🤗 🤗 🤗

㈨ 怎么把 html 网页发布在阿里云服务器上

我们把网站部署到服务器的时候，首先把域名解析到服务器，也就是解析到对应的IP地址，然后要弄清楚服务器是ESC还是虚拟主机，如果是虚拟主机，那我们就不用配置环境，可以直接上传代码到对应的目录就好，设置一下默认主页，这个在阿里云官网的控制台可以进行管理。如果是ESC的话，我们就需要根据服务器的操作系统进行环境配置，就跟我们本地配置是一样的操作，然后把代码上传到配置的目录就好。希望能帮到你

㈩ qiankun 微前端应用实践与部署（四）

一般情况下，我们对应用进行配置打包，要对图片字体等资源进行下面配置，使得资源路径正常加载。但是，在微前端模式下，子应用打包部署后，往往会出现子应用 css 文件里面引入资源路径加载失败的问题，下面就让我们来探究一下。

👉 独立应用下的 url-loader 配置：

因为 url-loader 的 options 项的属性 publicPath 属性默认是 '' ，表示相对路径，即打包出来的资源引用 url 都会加上相对路径寻找 static 静态资源入口，比如：

所有应用编译打包部署后，当主应用加载子应用，子应用加载自身的 css 文件样式时，由于 其对应的 css 文件里面的图片 url 引用是相对路径，会出现子应用的资源相对路径拼接主应用 domain 的情况，即子应用的 ../../static/img/bg_header.790a94f4.png 会在主应用的 domain 下进行资源的寻找，导致加载失败 404 的情况。

如果项目有用到第三方库，比如 element-ui ，那么就更有必要进行处理了。因为 element-ui 的字体图标是在 css 里面引入的，还有相关背景图片的引入也是在 css 里，所以需要配置 webpack 的 url-loader ，生产模式情况下直接指定资源前缀，使之成为绝对路径。

这样配置后，打包出来的 css 样式文件会变成：

资源是绝对路径，就不会出现上面子应用资源加载失败的情况。

但是，这种前端配置文件写死路径的做法灵活性并不好，比如不能做到编译一次，任意部署，因为路径写死，所以如果需要部署到其他服务器的话，就需要重新编译了。

接下来，讲的是实现灵活部署的方案。

我们在只编译打包一次前端应用的前提下，为了实现灵活部署，需要借助 nginx 来实现。

下面以 vue-cli 3 的配置为例，与 vue-cli 2 只是写法上的区别，其他都一样。

假设主应用部署地址是 192.168.2.192 ，子应用的部署地址是 192.168.2.192:7102 。

打包编译部署后，子应用的 css 文件里面的图片资源引用 url 如下：

主应用加载子应用的时候，子应用的资源拼接主应用 domian 后，子应用的 css 文件里面的图片资源加载路径 url 就会变成：

此时的关键就是要访问到子应用的资源，而不是去主应用资源目录去找。

所以我们采用 nginx 路径代理转发端口的方案，当应用访问 192.168.2.192/live 这个路径时，经过 nginx 进行路径代理转发配置，转发到子应用端口。

配置 nginx 代理规则：

此时真正访问的资源路径（子应用资源路径）是：

👋 至此，通过修改配置 url-loader 的 publicPath 以及配置 nginx 的路径代理转发，就可以实现编译打包一次，到处部署的目的。