前端打包文件本地简易部署

按照难易程度叙述。无论插件还是软件,安装一次,后续就能直接使用,前端必备。把启动命令放在了第一步,每次就看对于方式开头即可

使用插件live server部署项目

启动

方式一:打好的包的index.html右键,点击open with live server。默认浏览器会打开打包好的页面。默认端口:5500

方式二:命令行工具,命令进入html文件的目录,启动服务器:http-server

安装

此方式适用于,临时看打好包的效果。vscode中搜索插件Live Server安装。

修改端口

打开命令窗口输入settings,点击open workspace settings。输入理想端口即可

使用nginx部署项目

启动

nginx目录下

常用命令(window版本)

  • 启动:start nginx(也可双击exe。注意观察任务管理器,避免重复启动)
  • 重启: nginx -s reload
  • 停止: nginx -s stop

安装

官网下载,将打包文件放入文件夹html下

修改端口

打开nginx配置文件nginx.conf,查看端口 简单nginx配置

js 复制代码
#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Headers X-Requested-With;
  add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

server{
    listen 8083;
    server_name 127.0.0.1;
    root html;
    index index.html login.jsp;
    add_header Cross-Origin-Opener-Policy same-origin;
    add_header Cross-Origin-Embedder-Policy require-corp;

    location ~ .*\.(js|css|htm|html|gif|jpg|jpeg|png|bmp|swf|ico|rar|zip|exe|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma|woff|woff2)$ {
        root html;
    }

    location / {
      try_files $uri $uri/ /index.html;
    }

 }

}

使用服务器(tomcat或其他服务器)部署

优势可以部署前端包,后端包。

启动

进入bin目录,双击startup.bat启动项目

安装

官网下载,将打包文件放入文件夹webapps/ROOT下

修改端口

修改端口server.xml。查看端口为80。访问http://localhost:80

相关推荐
两个西柚呀1 天前
未在props中声明的属性
前端·javascript·vue.js
子伟-H51 天前
App开发框架调研对比
前端
桃子不吃李子1 天前
axios的二次封装
前端·学习·axios
SteveJrong1 天前
面试题 - JavaScript
前端·javascript·面试·ecmascript·基础·找工作·红宝书
阿金要当大魔王~~1 天前
uniapp 页面标签 传值 ————— uniapp 定义 接口
前端·javascript·uni-app·1024程序员节
全栈软件开发1 天前
uniapp三端影视源码苹果cms自动采集电影视频网站源码前端源码带VIP
前端·uni-app·影视源码
chxii1 天前
10.4FormData :前端文件上传与表单数据处理的核心工具
前端
AntBlack1 天前
不当韭菜 : 好像真有点效果 ,想藏起来自己用了
前端·后端·python
楊无好1 天前
react中props的使用
前端·react.js·前端框架
一个处女座的程序猿O(∩_∩)O1 天前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js