精华内容
下载资源
问答
  • 在项目打包之前,我们一般都会对项目进行打包优化 打包优化的流程:项目打包优化

    一、打包前的优化

    在项目打包之前,我们一般都会对项目进行打包优化

    打包优化的流程:项目打包优化

    打包过后,会生成一个dist文件,也就是打包后需要上线的文件

    二、创建配置ngnix服务器

    启动ngnix服务器

    在ngnix文件目录下,打开cmd面板,start nginx开启服务器

     

    三、nginx服务器配置

    众所周知,Vue路由模式有两种,hash(默认)和history,不同模式对应的nginx服务器配置不同,否则项目上线后会出现白屏

    那么,我们需要对应不同的模式去配置不同信息

    nginx配置文件为nginx-1.20.1/conf/nginx.conf

    1、hash模式

    其默认配置即可

    2、history模式

    history模式是,如果不进行相关nginx配置,上线后项目会出现白屏

    配置方法:

    在nginx.conf中找到'location / '配置信息,在其中添加以下代码即可
        try_files $uri $uri/ /index.html;

     

    展开全文
  • Ngnix使用Ngnix上线二、使用步骤1.引入库2.读入数据总结 使用Ngnix上线 1.首先需要安装nginx 下载地址:(http://nginx.org/en/download.html) (Nginx官网) 2.我们使用 二、使用步骤 1.引入库 代码如下(示例): ...

    使用Ngnix上线

    1.首先需要安装nginx
    下载地址:(http://nginx.org/en/download.html)
    (Nginx官网)
    在这里插入图片描述
    2.当我们安装好Nginx,我们就可以操作上线流程了,我们先将我们的项目打包完毕,具体怎样打包,请看详情
    打包优化

    既然说到打包我们又不得不提多环境变量,我们在打包前,这是必要做的事情,详情如下
    多环境变量

    启动Nginx

    控制台(CMD)切换到Nginx目录下,输入start nginx ,然后在浏览器页面输入localhost,出现如下界面则表示安装成功。默认监听80端口号。
    在这里插入图片描述

    Ngnix的指令

    (1)start nginx 开启nginx服务

    (2)nginx.exe -s stop 关闭nginx服务,快速停止nginx,可能并不保存相关信息

    (3)nginx.exe -s quit 关闭nginx服务,完整有序的停止nginx,并保存相关信息

    (4) nginx.exe -s reload 重载nginx服务,当你改变了nginx配置信息并需要重新载入这些配置时可以使用此命令重载nginx
    (5) 使用 taskkill /F /IM nginx.exe > nul命令强关nginx服务器

    出现白屏的原因

    模式是history模式,而不是hash模式
    hash模式就正常启动即可
    history模式有点特殊
    当你使用 history 模式时,url就像正常的url,例如
    “http://yoursite.com/mapp/”,不过这种模式还需要后台配置支持。因为我们的应用是单页面应用,如果后台没有正确的配置,当用户在浏览器直接访问 "http://yoursite.com/mapp/home"就会返回 404。

    处理白屏

    我们进入的直接页面基本都是hash模式的,当我们设置为history模式的时候,会因为nginx.conf中文件的内容导致白屏,这时候我们就应该找到location / {}去加上缺少的内容在这里插入图片描述

    展开全文
  • 项目上线流程 一、打包过程 运行命令:cnpm run build 1.2. 得到的 dist文件夹有两个文件(static:文件夹;index.html:文件)。保证 index.html 文件可以在本地正常打开 将打包得到的dist 放到服务器上(Apache ...

    项目上线流程

    一、打包过程
    1. 运行命令:cnpm run build

      1.2. 得到的 dist文件夹有两个文件(static:文件夹;index.html:文件)。保证 index.html 文件可以在本地正常打开

    2. 将打包得到的dist 放到服务器上(Apache Tomcat的服务器一般放在 webapps文件夹下面)

    3. 利用服务器域名打开 dist/index.html (文件)即可

    简单介绍

    Nginx 是一款自由的、开源的、高性能的HTTP服务器和反向代理服务器,同时也是一个IMAP、POP3、SMTP代理服务器。Nginx可以作为一个HTTP服务器进行网站的发布处理,另外Nginx可以作为反向代理进行负载均衡的实现。

    安装步骤

    1. 下载Nginx

    下载地址:http://nginx.org/en/download.html (Nginx官网)

    在这里插入图片描述
    2、下载之后,解压到指定的目录,就可以看到以下的目录
    在这里插入图片描述
    3、控制台(CMD)切换到Nginx目录下,输入start nginx ,然后在浏览器页面输入localhost,出现如下界面则表示安装成功。默认监听80端口号。
    在这里插入图片描述
    4、nginx命令介绍

    1. start nginx 开启nginx服务
    2. nginx.exe -s stop 关闭 nginx 服务,快速停止nginx ,可能并不保存相关信息
    3. nginx.exe -s quit 关闭nginx服务,完整有序的停止nginx,并保存相关信息
    4. nginx.exe -s reload 重载nginx服务,当你改变了nginx配置信息并需要重新载入这些配置时可以使用此命令重载nginx
    5. 使用 taskkill /F /IM nginx.exe > nul 命令强关nginx服务器

    访问项目

    hash模式

    1. 打包

    npm run build

    1. 把生成的dist目录,放到html目录下。
      在这里插入图片描述
    2. 浏览器访问:localhost/dist/index.html就可以看到页面了。
      在这里插入图片描述

    history模式

    当你使用 history 模式时,url就像正常的url,例如
    “http://yoursite.com/mapp/”,不过这种模式还需要后台配置支持。因为我们的应用是单页面应用,如果后台没有正确的配置,当用户在浏览器直接访问 "http://yoursite.com/mapp/home"就会返回 404。

    location / {
      try_files $uri $uri/ /index.html;
    }
    
    
    子目录部署

    如果项目没有直接部署在Nginx 主目录下,而是在其子目录,如:
    Nginx 配置root路径为:/user/local/nginx/html,子目录路径为:/user/local/nginx/html/dist,此时Nginx应该这样配置:

    location / {
      try_files $uri $uri/ /dist/index.html;
    }
    
    Nginx 转发时Header 中信息丢失

    通过Nginx 转发后,Header中 access_token 信息丢失,经查,发现 Nginx 在转发时,header 中带下划线_的属性默认不转发,需要增加配置:

    underscores_in_headers on;
    
    

    如图所示

    location / {
    root   html/dist/;
    try_files $uri $uri/ /dist/index.html;  
    index index.html;
            }
    
    
    展开全文
  • 文章目录keep-alive 的用法和坑点使用keep-alive后事件发生异常真机测试可能出现白屏,或者不能访问打包上线流程vue 中异步组件全局事件的解绑Vue 中调用自身组件实现递归Vue 中 的 滚动行为 今日总结: keep-alive...


    今日总结:

    1. keep-alive 用法和坑点
    2. vue 真机测试要点
    3. 打包上线流程
    4. 异步组件的使用场景
    5. 全局事件的解绑
    6. vue中的滚动行为

    keep-alive 的用法和坑点

    当我们使用路由切换多个页面时,每次都会重新请求一次数据,这样会造成页面性能的损耗,那么使用keep-alive组件包裹之后,就只会在第一次请求,并且缓存起来,往后再次切换到该页面时,不会重新发送请求
    main.js
    在这里插入图片描述

    Vue keep-alive 浏览器缓存中 可以使用exclude=“组件名” 可以选择不想要缓存的组件

    使用keep-alive后事件发生异常

    注意:使用exclude 之后 滚动事件等失效了、
    原因:keep-alive 中使用了 exclude="Detail" 后就不执行activated生命周期的钩子
    解决:把方法放在mounted中调用
    

    真机测试

    当我们做完一个迭代的任务是可能需要在真机上测试
    本地地址:http://192.168.0.106
    Webpack 中 默认不支持 通过 ip地址访问
    通过更改pagepack.json
    在这里插入图片描述
    重启后,便可以通过本地的地址访问,这样一来,就可以在手机上输入该地址进行测试了
    在这里插入图片描述

    可能出现白屏,或者不能访问

    可能出现访问时白屏效果
    1.可能浏览器默认不支持promise行为
    解决这个问题:

    cnpm install babel-polyfill --save
    

    它会判断如果浏览器不支持es6的行为,会自动兼容
    接着在main.js中引入
    在这里插入图片描述
    2.不能访问,可能是手机浏览器原因,换个浏览器,或者手机本身不支持

    打包上线流程

    执行 cnpm run build
    会出现一个dist文件夹,将这个文件夹中的内容放在服务器中目录下即可
    如果你想把dist文件夹中的内容放入名为project的文件下,可以这样做
    在这里插入图片描述
    改完之后重新 npm run build
    在这里插入图片描述
    就变成在project下访问了
    在这里插入图片描述

    vue 中异步组件

    因为是单页应用,所以在首页出现时,就会请求所有的静态文件,但随着项目越来越庞大,就不能一次请求完所有数据,这样使性能降低
    使用异步组件,就能实现按需加载js等文件,提升性能
    route/index.js
    在这里插入图片描述
    这样一来,当路由切换时,就会加载该组件的js文件,提升了性能

    同时组件之间相互嵌套时也能使用异步加载方式
    在这里插入图片描述

    使用异步加载,仅在app.js 很大时,至少多余1M,就是在项目很庞大时才使用,否则适得其反。
    

    全局事件的解绑

    利用生命周期钩子
    在这里插入图片描述
    因为是但单页应用 如果不解绑 那么在vue中任何组件中都会执行这个函数
    activated 是每次页面展示的时候就会执行
    deactivated 页面被隐藏的时候就会执行

    Vue 中调用自身组件实现递归

    在这里插入图片描述

    Vue 中 的 滚动行为

    参考官方文档:https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html#异步滚动
    在这里插入图片描述

    route/index.js
    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面...
  • 一、项目完成后运行npm run build,生成一个打包文件夹tests,把这个文件夹放到html目录下 二、liuulanqifang
  • 所以改为hash或者直接把模式配置删除,让它默认的就行 vue打包上线流程 通过npm run build 打包打包完成会生成一个dist文件夹,在dist文件夹中找到index.html右击用默认浏览器打开 在根组件中创建一个vue.config.js...
  • Vue打包上线流程
  • vue项目打包上线流程

    2020-09-25 07:59:23
    我们在完成项目打包上线的时候,会发现他的文件很大,这个时候我就需要对项目先做一些优化,优化之后在进行打包 一、项目打包之前的优化 1. 通过 externals 加载外部 CDN 资源 默认情况下,通过 import 语法导入的...
  • vue项目打包上线流程以及遇到的问题 1.打包上线过程 1.1如何打包? 在项目的package.json文件中的build命令可以实现打包。 在终端执行命令npm run build,会在项目根目录下生成一个dist文件夹,打开文件夹如图。 ...
  • 项目优化策略 ...通过vue-cli的命令选项可以生成打包报告 –report选项可以生成report,html帮助分析内容 vue-cli-service build --report 2.通过可视化的UI面板直接查看报告(推荐使用) 在可视化
  • 电商后台管理系统 一.项目优化策略 ...// 通过 vue-cli 的命令选项可以生成打包报告 // --report 选项可以生成 report.html 以帮助分析包内容 vue-cli-service build --report ② 通过可视化的UI面板直接查看
  • 一.项目优化策略 ...// 通过 vue-cli 的命令选项可以生成打包报告 // --report 选项可以生成 report.html 以帮助分析包内容 vue-cli-service build --report ② 通过可视化的UI面板直接查看报告(推荐) 1.在

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 159
精华内容 63
关键字:

vue打包上线流程

vue 订阅