技术学习分享_CKX技术 技术资讯 #yyds干货盘点#VUE打包部署Nginx

#yyds干货盘点#VUE打包部署Nginx

广告位

打包项目

我们都知道 Nginx 是一个高性能的HTTP和反向代理服务器,所有就用它来做静态资源服务器和后端的反向代理服务器。我用到的应该是用它部署我们用Vue搭建的前端项目。

打包前

在打包之前需要对我们写的Vue项目做一点点修改,因为开发环境和生产环境是不一样的。这个应该是具体项目具体分析吧!打包的时候会有相应的文档说明书的!应该是~

打包时

在控制台的终端输入:npm run build
等这个命令执行完会在项目结构的目录里看到增加了一个dist的文件夹,里面会有index.html,直接访问这个就可以。此外还有一个static的文件夹。
到这打包就完成了,下面需要把这个包放到服务器上。

部署 Nginx

复制粘贴

把打包好的 dist 文件夹里的这两个文件(static 文件夹 和 index.html )复制到 Nginx 文件中的 html 文件夹里,直接拖进去就行,会自动覆盖里面原来的东西。

修改 nginx.conf

把内容复制粘贴进去以后需要在修改一下nginx 的配置文件;在 conf 的文件夹下的 nginx.conf 文件里,在 server 属性里面新增一个配置:

location / {
try_files $uri $uri/ /index .html; # 这里可以理解指定到 html 文件夹下的 index.html
}
复制代码

应该也是一样的道理,具体项目具体分析,会有相应的文档说明书的!

重启 Nginx

配置完成后,需要重启 Nginx !启动成功后在浏览器输入相应 url ,成功的话就会看到自己项目的页面!

本文来自网络,不代表技术学习分享_CKX技术立场,转载请注明出处。

作者: CKX技术

上一篇
下一篇
广告位

发表回复

返回顶部