項目倉庫：vue+springboot-demo: vue+springboot增刪改查的demo (gitee.com)

①vue中修改配置

在public文件夾下新建config.json文件：

{"serverUrl": "http://localhost:9090"//這里localhost在打包后記得修改為服務器公網ip
}

然后修改main.js：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import {zhCn} from "element-plus/es/locale/index";
import axios from "axios"
const app = createApp(App)
axios.get('/config.json').then((res)=>{app.config.globalProperties.$config=res.data
})
export const globals=app.config.globalProperties
app.use(router)
app.use(ElementPlus, {locale: zhCn,
})
app.mount('#app')

最后修改request.js：

import axios from "axios"
import {globals} from "@/main"
const serverUrl=globals.$config?.serverUrl||'http:localhost:9090'
const request=axios.create({baseURL:serverUrl,timeout:30000
})
request.interceptors.request.use(config=>{config.headers['Content-Type']='application/json;charset=utf-8'return config
},error=>{console.log('request error'+error)return Promise.reject(error)
})
request.interceptors.response.use(response=> {let res=response.datareturn res
},error=>{console.log('response error'+error)return Promise.reject(error)})
export default request

上述修改主要是動態辨別項目是在主機還是在服務器上，從而動態修改運行地址?

②打包vue+springboot項目?

springboot：先雙擊clean，再雙擊package，會生成jar包

?

vue：會生成一個dist文件夾

npm run build

?

③配置服務器

首先需要在騰訊云或者阿里云購買一個服務器，新用戶注冊會有免費一個月的服務器使用，然后需要準備xshell（相當于服務器的cmd）和winscp（上傳文件到服務器）工具，將兩個工具連上服務器

查看服務器內網ip：

ifconfig

用360壓縮打開jar包，修改application.yml：將localhost修改為服務器內網ip，username和password修改為服務器數據庫的username和password

server:port: 9090
spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/demousername: rootpassword: 123456
mybatis:configuration:map-underscore-to-camel-case: true

用xshell7在服務器上創建一個vue3文件夾，并用winscp將dist文件夾和jar包拖入vue3文件夾中：

?

在服務器上安裝mysql：

①確定服務器的系統是否支持yum命令

輸入以下命令，不報錯即可：

yum -v

②下載對應的mysql 安裝包?

wget http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm

③安裝mysql?

yum -y install mysql57-community-release-el7-10.noarch.rpm

④?安裝對應的服務

yum -y install mysql-community-server --nogpgcheck

⑤啟動服務并查看Mysql 的初始密碼?

systemctl start mysqld.service #首先啟動mysql
grep "password" /var/log/mysqld.log #查看初始密碼

⑥修改初始密碼并刷新登錄

-- 1. 登錄MySQL
-- 回車后，輸入上面的初始密碼即可。
mysql -u root -p -- 2. 修改密碼
alter user 'root'@'localhost' identified by '密碼';-- 3. 刷新權限
flush privileges;-- 4.退出Mysql
exit

-- 1. 登錄(使用你的新密碼)
mysql -u root -p '新密碼'-- 2. 顯示所有的數據庫
show databases;+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
4 rows in set (0.00 sec)-- 3. 使用對應的數據庫改管理員信息
use mysql;-- 4. 查詢所有管理員
select user,host from user;+---------------+----------------+
| user          | host           |
+---------------+----------------+
| root          | %              |
| root          | 1**.2**.1**.67 |
| mysql.session | localhost      |
| mysql.sys     | localhost      |
+---------------+----------------+
4 rows in set (0.00 sec)

⑦給遠程權限

-- 1. 更新root的權限
update user set host='%' where user = 'root';-- 2. 設置完一定要刷新
flush privileges;-- 3. 再查詢一遍，檢查root的host變為%
select user,host from user;

?看見root的host為%就表示可以遠程連接數據庫了，在服務器打開3306端口就可以用navicat連接了

服務器上配置java環境：

?①去官網下載jdk壓縮包

②用winscp創建文件夾將壓縮包拖入，這里將壓縮包放入usr文件夾下的local文件夾下

?

③解壓文件并修改文件名

tar -xvf jdk-8u401-linux-x64.tar.gz

mv jdk1.8.0_401 jdk1.8

在winscp可以看見解壓后的文件：

④配置環境變量

vi /etc/profile

在該文件末尾添加下面代碼：先按esc，再按:wq保存推出

JAVA_HOME=/root/usr/local/jdk1.8
CLASS_PATH=.:$JAVA_HOME/lib/
PATH=$PATH:$JAVA_HOME/bin
export JAVA_HOME CLASS_PATH PATH

?環境變量生效：

source /etc/profile

驗證一下：

java -version

顯示如圖，說明配置成功?

?

③后端項目部署

修改下pom.xml文件：添加下面代碼，重新打包上傳服務器

<build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><executions><execution><phase>package</phase><goals><goal>repackage</goal></goals></execution></executions><configuration><includeSystemScope>true</includeSystemScope><mainClass>這里填寫你的 Application 的路徑</mainClass></configuration></plugin></plugins></build>

用winscp在vue3文件夾新建一個start.sh：

nohup java -jar springboot-demo-0.0.1-SNAPSHOT.jar > server.log 2>&1 &

啟動一下（或者直接用命令java -jar jar包名直接啟動更加便捷）：

cd vue3//進入文件夾
chmod 777 *//開放權限
./start.sh//啟動后端

用ll指令看下有沒有log文件，查看log文件（這是日志文件，會告訴你啟動成功還是失敗）：

用winscp查看該文件：出現如圖說明啟動成功

?

服務器開放9090端口：直接用公網ip的9090端口訪問一下，出現如圖就說明后端項目部署成功了

④前端項目部署

?安裝nginx：

yum install gcc-c++//安裝c++
yum install -y pcre pcre-devel//安裝pcre
yum install -y zlib zlib-devel//安裝devel
yum install -y openssl openssl-devel//安裝openssl-devel
cd /tmp/
wget http://nginx.org/download/nginx-1.24.0.tar.gz//安裝nginx
tar -zxvf nginx-1.24.0.tar.gz
cd /usr/local
mkdir nginx
cd nginx
cp -R /tmp/nginx-1.24.0 ./
cd nginx-1.24.0
./configure --with-http_stub_status_module --with-http_ssl_module
make && make install
cd ..
cd sbin/
./nginx   //這里就啟動nginx了

訪問下公網ip：顯示下圖說明成功?

配置項目：

cd ..
cd conf
vi nginx.conf

將源文件對應代碼段修改如下：

server {listen       80;server_name  localhost;#charset koi8-r;#access_log  logs/host.access.log  main;location / {root   /root/vue3/dist;//主要在這個地方修改為dist的路徑，其他地方不動index  index.html index.htm;}

重啟下nginx：

cd ..
cd sbin
./nginx -s reload

這里在訪問的時候可能會出現403 錯誤，開一下dist所在文件目錄的權限就好：

chmod -R 777 /root

訪問一下服務器：這里需要ctrl+鼠標左鍵刷新（強制緩存刷新）才顯示出來

整個前后端項目的部署到這里就差不多結束了?o(*￣▽￣*)ブ