前言
今天把自己寫(xiě)的demo登錄寫(xiě)完了,就想著試著走一下部署上線的流程。參考了很多的文檔,終于成功進(jìn)行了部署。在這里將服務(wù)器的搭建和vue項(xiàng)目的
部署上線進(jìn)行整理(都是基礎(chǔ)的知識(shí),希望對(duì)大家有幫助。對(duì)我?guī)椭呛艽蟮?
2.流程
1.服務(wù)器搭建
這里我用的是騰訊云的服務(wù)器。買(mǎi)了一個(gè)域名。沒(méi)有備案的域名也可以使用。買(mǎi)完服務(wù)器進(jìn)行域名解析。
點(diǎn)擊添加解析,按照下面這樣填寫(xiě)就行 馬賽克是你的外網(wǎng)ip
可以根據(jù)你需要的進(jìn)行修改,我這只是最基本的綁定。其他請(qǐng)自行百度。
3.添加ssh密鑰
第一步添加密鑰,會(huì)讓你下載一個(gè)文件到本地(勿刪,登錄xsheel和xftp用到)然后進(jìn)行綁定主機(jī)(主機(jī)需要在關(guān)機(jī)的狀態(tài)下進(jìn)行綁定)
4.安全組(這個(gè)貌似沒(méi)有關(guān)系,因?yàn)槲也挥浀梦野踩M是不是自己設(shè)置的 也沒(méi)有百度 我點(diǎn)開(kāi)安全組就有一條記錄在了。如果在服務(wù)器搭建過(guò)程中有問(wèn)題,可以百度這方面的只是。看是不是這里的問(wèn)題,因?yàn)槲覜](méi)在這出現(xiàn)過(guò)問(wèn)題 我也不好說(shuō)。)
5.登錄xshell6和xftp6
xshell6:搭建服務(wù)器的時(shí)候需要的終端管理系統(tǒng) xftp這里的作用是有的時(shí)候需要你在自己的系統(tǒng)下載linux 需要的壓縮包 然后傳輸?shù)絣inux系統(tǒng)中??梢越柚鷛ftp
xshell6登錄 主機(jī)為你的外網(wǎng)ip
用戶名一般都是root 密碼由于我們之前設(shè)置了密鑰 所以使用密鑰登錄,瀏覽選中之前設(shè)置密鑰讓你下載的密鑰文件 導(dǎo)入即可。點(diǎn)擊確定就登錄成功了
xftp的登錄一樣
6.安裝jdk
參考文檔: https://blog.csdn.net/w410589502/article/details/77850955
7.tomcat 安裝
參考文檔 : //www.gxlcms.com/article/141747.htm
https://www.gxlcms.com/article/98557.htm
tomcat 和 jdk的安裝我就是按照上面的文檔進(jìn)行安裝了,所以大家訪問(wèn)人家的博客就可以了。
8.mysql 安裝
mkdir /usr/local //進(jìn)入此目錄 wget http://dev.MySQL.com/get/Downloads/MySQL-5.7/mysql-5.7.11-Linux-glibc2.5-x86_64.tar.gz //下載mysql壓縮包 tar -xvf mysql-5.7.11-Linux-glibc2.5-x86_64.tar.gz //解壓 mv mysql-5.7.11-Linux-glibc2.5-x86_64/ mysql //重命名,方便后面的設(shè)置groups mysql //查看是否有mysql用戶組,有就跳過(guò)(mysql:mysql) 沒(méi)有就創(chuàng)建(groups:mysql: No such user) 括號(hào)里為判斷信息groupadd mysql useradd -r -g mysql mysql //創(chuàng)建用戶組cd mysql/ chown -R mysql:mysql ./ //修改權(quán)限 mkdir /usr/local/mysql/data //創(chuàng)建data目錄 ./bin/mysql_install_db --user=mysql --basedir=/usr/local/mysql/ --datadir=/usr/local/mysql/data/ //初始化信息 這里可能報(bào)錯(cuò)一個(gè)模塊找不到,直接yum安裝 就行了 [root@localhost mysql] ./bin/mysql_install_db --user=mysql --basedir=/usr/local/mysql/ --datadir=/usr/local/mysql/data/ 2016-01-20 02:47:35 [WARNING] mysql_install_db is deprecated. Please consider switching to mysqld --initialize 2016-01-20 02:47:45 [WARNING] The bootstrap log isn't empty: 2016-01-20 02:47:45 [WARNING] 2016-01-19T18:47:36.732678Z 0 [Warning] --bootstrap is deprecated. Please consider using --initialize instead
上面這四行為初始化信息后的提示信息,不用管他 這樣就算是初始化信息成功了
cp -a ./support-files/my-default.cnf /etc/my.cnf //復(fù)制文件 cp -a ./support-files/mysql.server /etc/init.d/mysqld 修改my.cnf文件 # These are commonly set, remove the # and set as required. basedir = /usr/local/mysql datadir = /usr/local/mysql/data port = 3306 # server_id = ..... socket = /tmp/mysql.sock character-set-server = utf8 # Remove leading # to set options mainly useful for reporting servers. # The server defaults are faster for transactions and fast SELECTs. # Adjust sizes as needed, experiment to find the optimal values. # join_buffer_size = 128M # sort_buffer_size = 2M # read_rnd_buffer_size = 2M ln -s /usr/local/mysql/ /usr/bin/ //創(chuàng)建In service mysqld start //啟動(dòng)服務(wù) [root@localhost ~]# cat /root/.mysql_secret //查看數(shù)據(jù)庫(kù)初始密碼 # Password set for user 'root@localhost' at 2017-03-16 00:52:34 (as;qwe23QADdqwe //類似這樣的數(shù)據(jù),這就是初始密碼 [root@localhost ~]# mysql -u root -p //登錄數(shù)據(jù)庫(kù) alter user root@localhost identified by 'tiger'; //修改數(shù)據(jù)庫(kù)密碼(有的時(shí)候修改成功了,遠(yuǎn)程的時(shí)候還是不可以.遠(yuǎn)程管理工具比如dbvisualizer報(bào)錯(cuò)28000 那么就在修改一次數(shù)據(jù)庫(kù)密碼) flush privileges; //刷新 show databases;//顯示數(shù)據(jù)庫(kù)。 +--------------------+ | Database | +--------------------+ | information_schema | | mysql | | performance_schema | | sys | +--------------------+ 如此顯示就是安裝成功了.
遠(yuǎn)程管理數(shù)據(jù)庫(kù)
使用dbvisualizer鏈接服務(wù)器上的mysql數(shù)據(jù)庫(kù)的時(shí)候,會(huì)報(bào)錯(cuò) ‘你的服務(wù)器ip' is not allowed to connect to this MySQL server
解決方法:
在shell6連接到mysql 數(shù)據(jù)庫(kù) use mysql //選擇mysql 數(shù)據(jù)庫(kù) GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' WITH GRANT OPTION FLUSH PRIVILEGES
重新遠(yuǎn)程連接即可。
使用dbvisualizer連接成功后,點(diǎn)擊數(shù)據(jù)庫(kù)任意位置,報(bào)錯(cuò)
[CREATE - 0 row(s), 0.000 secs] Could not getColumn for vue: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'OPTION SQL_SELECT_LIMIT=DEFAULT' at line 1 ... 1 statement(s) executed, 0 row(s) affected, exec/fetch time: 0.000/0.000 sec [0 successful, 0 warnings, 1 errors]
查看了百度都說(shuō)是表或者字段的問(wèn)題,但是我沒(méi)有點(diǎn)擊表操作啊。后來(lái)?yè)Q了10的版本 dbvisualizer 就可以使用了。之前使用的是8版本的 我懷疑是mysql 驅(qū)動(dòng)jar包的問(wèn)題。問(wèn)題解決了我就沒(méi)去管了。 這樣mysql 就解決了 下面就打包后臺(tái)代碼上傳tomcat進(jìn)行訪問(wèn)
9.打包后臺(tái)代碼
右擊后臺(tái)項(xiàng)目 export ---->MyEclipse JEE ------>WAR file
選擇本地保存路徑 finish打包。通過(guò)xftp將本地的war包上傳到服務(wù)器的
上傳到webapps目錄就行了,然后使用tomcat訪問(wèn)這個(gè)項(xiàng)目,tomcat會(huì)自動(dòng)解壓的
進(jìn)入 /usr/local/tomcat/tomcat7/logs
tail -f catalina.out //查看日志 其他日志命令請(qǐng)自行百度
10.vue項(xiàng)目打包
axios post 請(qǐng)求無(wú)法訪問(wèn)后臺(tái)以及數(shù)據(jù)無(wú)法傳輸解決
proxyTable: { // 在這里配置如下代碼 '/api': { //target:'http://localhost:8080/', // 你請(qǐng)求的第三方接口GradeSystem //target:'http://www.ruoyechenxi.com:8080/GradeSystem', // 你請(qǐng)求的第三方接口 target:'http://www.ruoyechenxi.com:8080', // 你請(qǐng)求的第三方接口 changeOrigin:true, // 在本地會(huì)創(chuàng)建一個(gè)虛擬服務(wù)端,然后發(fā)送請(qǐng)求的數(shù)據(jù),并同時(shí)接收請(qǐng)求的數(shù)據(jù),這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會(huì)有跨域問(wèn)題 pathRewrite:{ // 路徑重寫(xiě), '^/api': '' // 替換target中的請(qǐng)求地址,也就是說(shuō)以后你在請(qǐng)求http://api.jisuapi.com/XXXXX這個(gè)地址的時(shí)候直接寫(xiě)成/api即可。 } } } //config文件夾下的build.js 中 dev 里面配置
頁(yè)面使用axios
let params = new URLSearchParams(); //這個(gè)請(qǐng)自行百度 params.append("code", "2"); this.$axios({ method: 'post', url: '/GradeSystem/repairCode.do', data: params }).then(function(response) { alert(response.data); th.$router.push({ path: "/index" }); }).catch(function(error) { alert(error); });
后端代碼
resp.setHeader("Access-Control-Allow-Origin", "*"); resp.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
問(wèn)題解決.
打包路徑問(wèn)題
config文件下的build.js 中的 build 代碼塊中
index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', productionSourceMap: false,
在router文件夾下的index.js添加 base '/自定義文件夾名/' 上面import我之前是使用的@ 后來(lái)我換成了 ../ 不知道有沒(méi)有影響,請(qǐng)自己注意下這里
在git bash here 里面
這樣就是打包成功,
在tomcat下的這個(gè)目錄創(chuàng)建一個(gè)空目錄 名字就叫作你在路由的index.js自定義的那個(gè)名字
然后將dist文件下的static文件家和index.html放在這個(gè)目錄下 訪問(wèn)地址 http://xxxxxxx/abcd 就可以訪問(wèn)你的項(xiàng)目了 這樣一般出現(xiàn)的路徑問(wèn)題就不會(huì)出現(xiàn)了 有的時(shí)候會(huì)出現(xiàn)樣式錯(cuò)亂的問(wèn)題,一般就是你在組件中修改了公共組件的樣式 建議自定義樣式 或者使用scoped 進(jìn)行封裝。
地址欄刷新 頁(yè)面404 問(wèn)題 參見(jiàn)上圖 新建WEB-INF文件夾 在里面新增一個(gè)web.xml 里面的代碼為
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1" metadata-complete="true"> <display-name>Router for Tomcat</display-name> <error-page> <error-code>404</error-code> <location>/index.html</location> </error-page> </web-app>
在項(xiàng)目中新建此文件,里面內(nèi)容自己定義。地址欄刷新問(wèn)題就解決了。
至此,所有的流程就都解決了,這篇博客中基本都是參考別人的博客進(jìn)行歸納總結(jié)的。畢竟也是花了點(diǎn)時(shí)間的。希望對(duì)大家有所幫助。畢竟流程都走完了 剩下的就是慢慢開(kāi)發(fā)業(yè)務(wù)了。
總結(jié)
以上所述是小編給大家介紹的vue項(xiàng)目部署上線遇到的問(wèn)題及解決方法,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com