上线流程

我比代码跑得快
103 阅读3分钟

项目打包

vue项目中大家在运行的时候我们是需要用内置的devServer帮助我们自动项目 开发过程中没有问题

但是 我们所写的项目今后是需要上公网让用户访问的 所以我们需要把项目放在性能更好的服务器上运行

还有就是 我们所写的是.vue文件 浏览器不认识 没有办法直接解析

所以我们就绪要对当前项目 进行打包 就是把项目编译成 html css js 方便我们把项目放到服务器上也方便浏览器解析

打包流程

1.npm run build命令打包 但是会发现打包之后资源路径有问题

2.修改静态资源路径 publicPath

module.exports={
    // 注意位置
    // 注意位置
    // 注意位置
    // 注意位置
    // 注意位置
    publicPath:"./",
​
    devServer:{
        open:true,//自动开启浏览器
        port:8888, //修改端口
        proxy:{
            "/api":{
                 target:"http://www.weather.com.cn",
                 changeOrigin:true,
                 "pathRewrite":{
                   "^/api":"/"
                 }
            }
        },
    }
}

3.修改路由模式为hash

服务器上线流程

服务器购买与连接

在购买ECS服务器后，系统会创建一个ECS实例。每一个ECS实例对应一台已购买的云服务器。您可以通过电脑上自带的终端工具访问云服务器，进行应用部署和环境搭建。

  1. 在ECS实例列表页面，选择实例的所属地域。
  2. 找到目标实例，然后在操作列选择 【 更多 】 > 【 密码/密钥 】 > 【重置实例密码 】 ，然后在弹出的对话框设置ECS实例的登录密码

  1. 在弹出的页面，单击【立即重启】使新密码生效。

  2. 在ECS实例列表页面，复制ECS实例的公网IP地址。

  3. 连接远程桌面

    （1）方式1 浏览器直接访问

即可连接

（2）远程桌面方式

在电脑的开始中搜索远程桌面

nginx服务器

Nginx是一个http服务器。是一个高性能的http服务器及反向代理服务器。官方测试nginx能够支支撑5万并发链接，并且cpu、内存等资源消耗却非常低，运行非常稳定。

代理服务器

代理服务器，客户机在发送请求时，不会直接发送给目的主机，而是先发送给代理服务器，代理服务接受客户机请求之后，再向主机发出，并接收目的主机返回的数据，存放在代理服务器的硬盘中，再发送给客户机。

注意

我们学习的vue的跨域 是基于脚手架内置服务器的 但是我们打包之后这个服务器就不帮助我们启动服务了 所以我们之前配置的跨域设置就作废了

使用

1.解压出nginx得到如下内容

2.打开conf文件夹 复制一份nginx.conf文件 并且修改名字（名字随便起） 这个文件就是nginx的配置文件

3.打开Powershell cd到当前nginx路径下 输入 ./nginx.exe -c ./conf/你复制的文件名.conf 启动

4.打开浏览器输入localhost:80即可启动

使用小扩展

记得如果修改服务器内容了 要停止之后在重新启动

打开Powershell cd到当前nginx路径下 输入 ./nginx.exe -c ./conf/你复制的文件名.conf -s stop 停止

运行我们打包项目

1.把我们打包好的dist放到根路径下

2.修改我们的.conf文件

3.配置端口

4.在电脑浏览器尝试使用 你的公网ip加端口访问

如不行 重新启动（不要忘了先关闭nginx） 运行浏览器即可看见

avatar
文章
阅读
粉丝