将vue项目打包后放到nginx服务器

 


下载配置nginx服务器
由于项目的需求,把项目部署到nginx服务器上面。

首先要现在并配置nginx,这里我看的是菜鸟教程的过程
链接: 点这.
2. 但是你需要先配置linux系统,这里我采用的是虚拟机的方式–VM。也就说你要要先下载VM(vmware workstation),在下载配置linux,linux 系统我选的是centos7。这一步可以自行百度。
3. 接下来就是按照菜鸟的教程。
这一步是困扰我比较久的地方,那个cat 命令老是用不对。后来我还是用的 vi 办法。首先全部删除(百度 vi 如何全部删除),在复制,粘贴。
4. 关于如何启动nginx,进入到sbin 目录,然后./nginx就启动了。

重启命令:

./nginx -s reload
1
nginx启动和关闭命令

 

ps -ef|grep nginx
1
这一行命令主要是查看nginx的运行状态,这里显示master 表示nginx正常运行。

为了检验nginx是否启动成功,我输入了菜鸟的网址,结果显示失败。这时候要仔细看nginx.conf这个文件。观察里面的server。

注意下这两个地方。这里补充一个知识。localhost的ip是127.0,0.1。当时犯了个错,在本机输入这个url,一直显示错误,以为没有配置正确,结果发现这怎么可能对。虚拟机相当于另一台电脑,和云服务器一样的道理。
如果要从本机访问,首相查看ip。
使用命令`ifconfig

这个就是ip地址。
如果本机要访问,需要开通防火墙。相关资料可以百度。
`

将dist目录放入服务器
对于打包好的dist文件,直接放入nginx文件里面的html文件夹里面

2.接下来就是比较关键的调整
针对nginx.conf

观察这个文件可以发现,要实现页面的访问,主要是靠里面的server。既然这样的话,就可以自己单独加一个server组。

下面的server就是我自己添加的。一行行来说明。

listen 端口号
ip地址,用ifconfig可以查看得知。
root 后面接的就是打包好的dist文件的路径
后面那个可以直接抄,不过我dist里面的是index.html,你的是其他名字就写其他的。
下面这个比较关键,是解决跨域的(虽然我也不懂跨域)。
这里需要和vue项目的代理配置文件结合起来看。以我的为例。

注意这里的两个地方,一个是端口 8080。另一个是proxy 里面的’/div’。
第二个地方是在于,我之前按照网上的办法,直接写的就是api,但是我不懂这个是什么意思,直接抄过来的。后面报错。
这里提个醒,前端报错主要F12,看看网络。在请求网址哪里发现了写的是div,但是代理文件里面的是api,改过来就好。

关于jdk和mysql
这个就直接百度就是。
mysql遇到一个编码错误的问题。
编码问题

将vue项目打包后放到nginx服务器

上一篇:restframework自定义错误捕获


下一篇:Protostuff序列化详解