前言:

  • 细心很重要,其次就是对vue cli 生成的项目目录,了解多少,项目启动后,文件目录的文件,是怎么顺序被执行…

第一步:vue项目中的配置

  • 1.  创建vue.config.js 文件(该文件会被 @vue/cli-service 自动加载)详情见:https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

在这里插入图片描述

  • 2.  路由文件中配置,

在这里插入图片描述

  • 3.  在public中的index.html 配置

在这里插入图片描述

第二步:修改Nginx上的配置文件

  • 1.  进入nginx目录下,在html文件夹下创建目录(这里的文件名zhong),然后将npm run build 打包后生成的dist文件夹中的文件copy到新创建的目录~zhong即可。(个人推荐,上传文件或创建文件夹使用fileZilla,将桌面的文件,拖到服务器对应的位置即可)

在这里插入图片描述

  • 2.  修改nginx下的配置文件(我自己一共配置了三个前端项目)

在这里插入图片描述

最后:暂停nginx服务,重新开启即可。

  • 1. 启动nginx的命令为 /usr/local/nginx/sbin/nginx
  • 2. 停止nginx的命令为 /usr/local/nginx/sbin/nginx -s stop

在这里插入图片描述

  • 访问:http://域名/zhong/  或  http://ip:端口号/zhong/(细节很重要,域名后面的名称末尾不要忘记斜杠!)

若你是第一次配置,可以先配置一个项目的配置,其中有部分知识解析,见我另一篇:
https://blog.csdn.net/qq_41930094/article/details/118153719?spm=1001.2014.3001.5502

Logo

前往低代码交流专区

更多推荐