本地模拟上线/测试

使用nginx模拟生产环境

是一个高性能的HTTP和反向代理web服务器

注意 nginx在自己电脑的时候所在的路径不能用中文

2.修改了配置文件（nginx.conf）一定要重启nginx

3.不要去双击好多次，任务管理器查看只要有两个nginx就行。结束nginx的时候，右键先结束下面哪个（子进程，再结束上面的主进程）

在这个nginx文件目前我们只用两个文件

nginx-1.17.6\conf\nginx.conf 文件：对nginx服务器进行配置的

nginx-1.17.6\logs\error.log 当我们的nginx启动报错的时候，可以到这里来查看错误

首先我们看配置文件：配置文件中的注释都是#

项目部署在根目录

 server {
        listen       8887;      #监听的端口号
        server_name localhost; #访问的地址
        location / {        #访问这个服务器根目录
            root   html;    #访问项目的路径
            index  index.html index.htm;   #访问路径下面的那一个文件
            try_files $uri $uri/ /index.html break; 
        }
 }

双击/命令行运行nginx.exe文件

打开任务管理器，查看这个文件是否存在证明启动成功

然后根据上面的配置访问 http://localhost:8887 它就会加载html文件夹里面的内容我们只要把打包构建之后的dist目录里面的项目拷贝到这个下面这个地址就能访问了

项目部署在子目录/子应用

 server {
        listen       8887;      #监听的端口号
        server_name localhost; #访问的地址
        location /suming {    #访问服务器的根目录下面的/suming文件夹下面的项目子目录
            #root   "E:/1711A/newnear_pro/dist";     #访问的根路径
            #root   "E:/1907A/bwonline/dist";       #访问的根路径
             root html;
            index  index.html index.htm;              #根路径下面的首页叫什么
           try_files $uri $uri/ /suming/index.html; 
        }
 }

1,在nginx的配置里面.下面的try_files 指向的根文件路径要加上子目录的路径/suming

2在项目的webpack配置(vue.config.js)里面,添加上打包到根目录的配置

3.在路由文件夹下面添加一个base

const router = new VueRouter({
  mode: 'history',
  base: '/suming',    //Vue是从nginx的根目录开始查找组件导致的。所以需要修改路由的查找起点
  // base: process.env.BASE_URL,

module.exports = defineConfig({
  publicPath: process.env.NODE_ENV === 'production' ? '/suming' : '/',
})

4：在nginx的根目录下面新建一个子应用文件夹或者是添加一个webpack配置

上传服务器

把我们的项目上传到服务器需要一个搬运工具 :FileZilla (同等作用的工具还有FTP XShell ssh pwoershell ,只需要你们记住fileZilla就行)

公司还要告诉你,你的项目要上传到哪个位置:

在我服务器 /www/wwwroot/www.lovetang.top/CRMEB-master/crmeb/public

当然也可以通过命令行链接服务器(不推荐)

sftp [email protected] 输入密码时看不见输入的,是因为linux的一种自我保护机制,就是看不见

在项目上线过程中遇到的问题:

1.我们公司是history模式.在项目上线的时候,刷新会报404的错误.当时我是从网上找了一个解决方式,对nginx进行配置try_files,实际上,就相当于时让页面刷新的时候,重定向到根页面,解析路由表,而不是当成文件夹来解析

路由分为两种模式hash 和history. 其中history上线才会报404

项目的打包上线部署

本地模拟上线/测试

项目部署在子目录/子应用

上传服务器

在项目上线过程中遇到的问题:

猜你喜欢