1.2、打包Vue项目 开发完成后,在终端输入npm run build或者vite build进行打包,不同项目的打包指令和流程可能不相同,需要查看package.json的具体配置。 打包完成后,会生成一个dist文件夹,就是成功打包。 1.3、上传项目到Nginx目录 查找Nginx安装的路径,输入:whereis nginx,找到nginx的目录,将打包好的文件夹(即dist文...
1、首先 创建vue.config.js文件: module.exports={ publicPath: process.env.NODE_ENV== 'production' ? './' : '/', } 这个代码是判断你是否为开发者然后设置路径。 2、 然后运行 npm run build 打包项目,最后生成一个 dist 文件夹。 3、打开 nginx 里面重要的文件夹就2个; 一个是html放页面文件的地...
http://localhost//默认会跳到对应的路由,vue-router重定向,可能变成这样!http://localhost/#/a```3.2vue history 模式1. 配置修改 配置文件在 nginx.conf中 server { # 服务器端口 listen80; # 服务器名称 server_name localhost; # 路径配置 location/{ # 相对路径配置,基于nginx启动的位置 root dist; i...
第二种方式参考官方地址https://nginx.org/en/docs/install.html中的Building from Sources片段,这种实际上就是下一个tar.gz包仍到linux服务去自己编译。 在linux服务上和window环境上使用nginx部署vue项目并没有太大差异,把构建好的vue项目dist上传到linux服务上,通用修改nginx服务器中的root来指向dist就ok了,然后...
1、首先打包Vue项目成dist文件 这里采用亲后端分离的快速开发框架 若依前后端分离版手把手教你本地搭建环境并运行项目 然后再服务器上某目录下,这里是在/usr/local下新建dockerfilenginx目录 然后进入该目录,将dist整个目录上传至该目录下。 2、上传nginx的配置文件,nginx.conf ...
Nginx前端部署教程 1.准备带部署项目 1.编译Vue文件 命令: npm run build 下图编译成功截图 2.压缩dist文件夹 修改生产服务器IP,点击项目下的dist/index.html文件,修改siteUrl服务器地址。下图所示 修改完成后,直接压缩dist文件夹,得到 dist.zip 压缩文件...
其实也是比较简单的,主要的就是复制当前vue打包好的dist复制进去,还有nginx配置。 2、编写nginx配置 主要的就是替换nginx的default.conf server { listen 80; server_name localhost; #charset koi8-r; access_log /var/log/nginx/host.access.log main; ...
如何使用Nginx来部署我们打包好的前端Vue项目 Nginx 环境搭建 因为这里做的演示是本地服务,就需要安装在自己的电脑上 Mac系统下的nginx的安装及使用 1.确认...
初级部署 我们先来讲解不使用容器化的部署流程,即怎么把vue项目部署到nginx 上传文件 通过npm run build我们得到了一个dist目录,如果是在本地开发可以把对应目录压缩 scp ./dist.rar name@ip:/path/ 上传到服务器解压缩,当然你也可以用别的更方便的有UI的软件,把文件上传到服务器 ...
再部署vue项目之前得建立个文件夹用来存放vue项目和方便管理 可以像这个样子 一会我们的vue项目存放到adminvue文件夹中方便管理和查找使用 接下来就是vue项目打包 npm run build vue项目目录下会出现dist文件夹 接下来可以把dist里面的所有东西放到刚才创建的adminvue文件夹中,可以使用Xftp ...