vue+springboot 制作属于自己的个人网站 ① vue前端部署
一、准备工作
1.1 下载node + vue
① 下载 node
node.js下载地址:建议下载稳定版Node.jshttps://nodejs.org/zh-cn/
② 下载vue
在控制台输入如下指令
npm install -g @vue/cli
1.2 租用xx云服务器,这里以阿里云服务器为例
建议百度 阿里云/华为云/百度云服务器购买教程,下面给两个挺好的例子
SpringBoot项目部署到阿里云服务器全流程(简直详细到啰嗦)_某羊的博客-CSDN博客_springboot项目部署到阿里云服务器
《阿里云服务器教程1》:如何购买阿里云服务器_云tech的博客-CSDN博客_购买阿里云服务器
1.3 下载MobaXterm实现远程连接云服务器
① 软件下载
这里推荐自己百度搜索MobaXterm下载即可
② 连接远程服务器
点击 session会话,再点击SSH,在Remote host里面输入自己的服务器公网IP,点击specify username后面的小人,配置登陆角色。
这里面的密码是阿里云的远程连接的密码。
这里面黑框的密码是阿里云实例的密码,注意这里面的密码是不会显示出来的,输入的时候注意不要输入错误。
输入回车即可成功登陆
1.4 在云服务器上下载nginx
① 在远程服务器上依次执行如下命令
安装nginx
sudo yum install -y epel-release
sudo yum -y update
sudo yum install -y nginx
② 安装好后nginx目录是固定的
配置好后启动nginx服务,访问公网IP地址会展示目录/usr/share/nginx/html 下的页面。
nginx启动项目的默认目录在:/usr/sbin的位置。
通过cd跳转到/usr/sbin目录,如果不在这个位置可以通过下面的命令查看nginx位置
whereis nginx
通过cd跳转到nginx目录之后,执行如下命令启动nginx
start nginx
③ 注意云服务器中的实例的安全组端口,确定80端口是打开的
在云服务器的实例中,加入配置安全组
主要是打开22端口:允许服务器远程连接,和80端口:nginx服务器使用
二、vue前端部署到云服务器
2.1 创建一个vue项目并进行打包
① 创建一个vue项目
以管理员的身份打开控制台,跳转到你想要创建项目的位置
输入如下命令,创建一个vue项目。
vue create 项目名字
通过键盘的↑↓控制选项,选择Manually select features 之后按下回车。
之后选择一些东西进行配置,空格键为选中,回车键为确定这些选项。通过空格键选中
Choose Vue version:选择vue版本
Babel:JavaScript 编译器
Router:路由控制
Vuex:全局状态管理
Css Pre-processors:css预处理器
选中这些之后按下回车。
vue版本选择2.x
router模式输入N
Css选择Less
配置文件设置选择in dedicated config files
最后一个选项为是否保存本次的设置为预设,选哪个都行
通过vscode打开项目,通过ctrl+~打开控制台,输入如下指令即可启动项目
npm run serve
② 引入element-ui组件库
在控制台输入如下代码,下载element-ui组件
npm i element-ui -S
在项目的main.js中引入element-ui组件
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'; //全局引入element
import 'element-ui/lib/theme-chalk/index.css'; //全局引入element的样式
Vue.config.productionTip = false
Vue.use(ElementUI); //全局注入element
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
③ 打包这个vue项目
在src同级目录下新建vue.config.js文件,配置路径
// vue.config.js
module.exports = {
publicPath: './',
}
在控制台输入如下命令,即可将项目打包到一个dist文件夹中
npm run build
打包完成后进入dist文件夹,打开index.html即可看到我们打包的项目
2.2 修改nginx配置,将打包的文件传到云服务器上
① nginx配置文件位置
在nginx的目录(一般在/usr/sbin下面)输入如下命令,可以查看nginx配置文件的位置和状态。
nginx -t
配置文件一般在/etc/nginx/nginx.conf这个位置。
② 修改nginx配置文件
找到配置文件的位置之后,双击打开进行修改。只需修改server下面的root部分即可。 其他部分可以保持不动。
root /usr/share/nginx/html/dist;
server {
listen 80;
listen [::]:80;
server_name _;
root /usr/share/nginx/html/dist;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
③ 上传打包好的vue代码
将打包好的vue代码文件夹dist上传到上面我们更改的root的位置(/usr/share/nginx/html/)
之后通过下面的命令,在nginx的目录下(一般在/usr/sbin下面)重新启动nginx服务即可。
nginx -s reload
重启之后,直接访问服务器的IP地址即可看到我们部署的网站。(不需要在IP地址后面加端口号或者/路径,如果配置正确的话都可以访问到)
三、总结
3.1 遇到的问题
① 创建vue项目时候报错 command failed: npm install --loglevel error
网上给的解决方式:
8种方法解决vue创建项目报错:command failed: npm install --loglevel error_星期一研究室的博客-CSDN博客_vue项目创建失败
我的问题是一开始的时候我用的是之前的模板创建的vue项目,然后他的某一些组件的版本就有了冲突,解决方式就是通过Manually select features创建一个新的vue项目。
② 编译vue项目的时候报错 98% after emitting CopyPlugin vueCli
这个问题大多数的原因是因为引入组件时的路径错误
98% after emitting CopyPlugin vueCli 卡住错误解决_阿清呀.的博客-CSDN博客
但我遇到的是我在创建vue项目的时候没有选择Css Pre-processors,然后还用了
style scoped lang ="less"的形式写样式,就会一直编译不成功。
③ 启动nginx报错nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)
一般可以通过结束nginx进程再重启解决这个问题
先通过指令查看nginx进程
ps -ef|grep nginx
再结束掉这两个root的进程再重启就OK了
kill -9 215507
kill -9 292613
3.2 吐槽
本来以为要花更多的时间才能把这个东西弄出来的,没想到半天就够了,有些东西其实是想着难,慢慢做起来还是挺简单的,就是会遇到一些莫名其妙的错误耽搁了大部分时间,部署后端应该会简单点,其实这只是一个基本的部署,还有很多地方要改。🤣
了不起的皮先森。266: 博主非常厉害,这个真的有用,找其他教程搭了两三天都不行,这个终于成功了!!!
Linux小趴菜: 好人年年拿国奖
lxtnsa: 好人年年拿国奖!!!!
絶え間な: 好人年年拿国奖
舟舟亢亢: 好人年年拿国奖