阿里云安装Nginx+vue项目部署,前端自学资料

78 阅读3分钟

编译安装

make

make install

查找安装路径:

whereis nginx

进入sbin目录,可以看到有一个可执行文件nginx,直接 ./nginx 执行就OK了。

运行起来之后访问服务器ip,可以看到nginx的欢迎页面。

如果访问不了,请在阿里云服务器实例管理的安全组设置一下。

配置开机自启动。


即在rc.local增加启动代码就可以了。

vi /etc/rc.local

增加一行

/usr/local/nginx/sbin/nginx

设置执行权限:

chmod 755 rc.local

按i进入编辑模式,按:wq保存退出

这样就完成了

重启服务


/usr/local/nginx/sbin/nginx -s reopen

查看服务


ps -ef | grep nginx

停止服务


kill 7332

查看配置


vi /usr/local/nginx/conf/nginx.conf

重新载入配置文件


在修改了配置文件后需要重新载入配置文件。

/usr/local/nginx/sbin/nginx -s reload

打包 Vue 项目并上传至服务器


在 npm run build 打包项目之前,需要修改一下 config 目录中的 index.js 文件,否则静态文件可能会加载失败。打开 config/index.js,定位到 build 对象下的 assetsPublicPath 位置,路径修改为“./”:

build: {

// ...

assetsPublicPath: './',

}

然后执行 npm run build 打包项目。

打包成功后,会在项目目录中多一个 dist 文件夹,里边有一个 static 目录(存放着静态文件)和 index.html ,这就是打包好的项目,然后把这个文件夹上传到服务器上就可以了。

打开 Xftp,在本机上找到 dist 这个目录,传输到服务器上,我在服务器的 var 目录下新建了一个 www 目录,用来存放我的项目:

在这里插入图片描述

传输完成后,打开 XShell,修改一下 nginx 的配置文件,运行:

vim /usr/local/nginx/conf/nginx.conf

在 server 下的 location 中配置站点根目录:

在这里插入图片描述

修改了配置文件,需要重新载入配置文件,执行:

/usr/local/nginx/sbin/nginx -s reload

访问服务器 ip 地址,就可以看到自己的项目了。

在这里插入图片描述

常用操作


配置 nginx 常用命令:

查看配置:vi /usr/local/nginx/conf/nginx.conf

编辑配置:vim /usr/local/nginx/conf/nginx.conf

重启配置:/usr/local/nginx/sbin/nginx -s reload

重启服务:/usr/local/nginx/sbin/nginx -s reopen

可能遇到的问题


问题一

nginx 报异常"/usr/local/nginx/logs/nginx.pid" failed (2: No such file or directory)

解决办法:

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

还有一种可能就是nginx.conf的nginx.pid被注释了,将下图中pid前的#去掉,保存退出再次启动nginx

在这里插入图片描述

问题二

访问图片链接报 403 Forbidden 错误。

解决办法:

查看Nginx日志,显示 failed (13: Permission denied), 没有权限。

将nginx.config的user改为和启动用户一致。

在这里插入图片描述

Vue

  • 什么是MVVM?

  • mvvm和mvc区别?它和其它框架(jquery)的区别是什么?哪些场景适合?

  • 组件之间的传值?

  • Vue 双向绑定原理

  • 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程?

  • 虚拟 DOM 实现原理

  • Vue 中 key 值的作用?

  • Vue 的生命周期

  • Vue 组件间通信有哪些方式?

  • vue 中怎么重置 data?

  • 组件中写 name 选项有什么作用?

  • Vue 的 nextTick 的原理是什么?

  • Vuex 有哪几种属性?

    开源分享:docs.qq.com/doc/DSmRnRG…