vue项目部署上线遇到的问题及解决方法


Posted in Javascript onJune 10, 2018

前言

    今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程。参考了很多的文档,终于成功进行了部署。在这里将服务器的搭建和vue项目的

部署上线进行整理(都是基础的知识,希望对大家有帮助。对我帮助是很大的)

2.流程

     1.服务器搭建

        这里我用的是腾讯云的服务器。买了一个域名。没有备案的域名也可以使用。买完服务器进行域名解析。

vue项目部署上线遇到的问题及解决方法

点击添加解析,按照下面这样填写就行 马赛克是你的外网ip

vue项目部署上线遇到的问题及解决方法

可以根据你需要的进行修改,我这只是最基本的绑定。其他请自行百度。

     3.添加ssh密钥

vue项目部署上线遇到的问题及解决方法

第一步添加密钥,会让你下载一个文件到本地(勿删,登录xsheel和xftp用到)然后进行绑定主机(主机需要在关机的状态下进行绑定)

    4.安全组(这个貌似没有关系,因为我不记得我安全组是不是自己设置的 也没有百度 我点开安全组就有一条记录在了。。如果在服务器搭建过程中有问题,可以百度这方面的只是。看是不是这里的问题,因为我没在这出现过问题 我也不好说。。)

   5.登录xshell6和xftp6

     xshell6:搭建服务器的时候需要的终端管理系统 xftp这里的作用是有的时候需要你在自己的系统下载linux 需要的压缩包 然后传输到linux系统中。可以借助xftp

xshell6登录 主机为你的外网ip

vue项目部署上线遇到的问题及解决方法vue项目部署上线遇到的问题及解决方法

用户名一般都是root 密码由于我们之前设置了密钥 所以使用密钥登录,浏览选中之前设置密钥让你下载的密钥文件 导入即可。点击确定就登录成功了

      xftp的登录一样

vue项目部署上线遇到的问题及解决方法

     6.安装jdk

        参考文档: https://blog.csdn.net/w410589502/article/details/77850955

    7.tomcat 安装

       参考文档 :   https://3water.com/article/141747.htm

                       https://3water.com/article/98557.htm

     tomcat 和 jdk的安装我就是按照上面的文档进行安装了,所以大家访问人家的博客就可以了。

    8.mysql 安装

mkdir /usr/local //进入此目录 
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 //重命名,方便后面的设置groups mysql //查看是否有mysql用户组,有就跳过(mysql:mysql) 没有就创建(groups:mysql: No such user) 括号里为判断信息groupadd mysql useradd -r -g mysql mysql //创建用户组cd mysql/ chown -R mysql:mysql ./ //修改权限
mkdir /usr/local/mysql/data //创建data目录
./bin/mysql_install_db --user=mysql --basedir=/usr/local/mysql/ --datadir=/usr/local/mysql/data/ //初始化信息 这里可能报错一个模块找不到,直接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 //复制文件
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/ //创建In
service mysqld start //启动服务
[root@localhost ~]# cat /root/.mysql_secret //查看数据库初始密码
# Password set for user 'root@localhost' at 2017-03-16 00:52:34 
(as;qwe23QADdqwe //类似这样的数据,这就是初始密码
[root@localhost ~]# mysql -u root -p //登录数据库
alter user root@localhost identified by 'tiger'; //修改数据库密码(有的时候修改成功了,远程的时候还是不可以.远程管理工具比如dbvisualizer报错28000 
       那么就在修改一次数据库密码)
flush privileges; //刷新
show databases;//显示数据库。
+--------------------+
| Database  |
+--------------------+
| information_schema |
| mysql  |
| performance_schema |
| sys  |
+--------------------+ 如此显示就是安装成功了.

远程管理数据库

      使用dbvisualizer链接服务器上的mysql数据库的时候,会报错 ‘你的服务器ip' is not allowed to connect to this MySQL server

     解决方法:

在shell6连接到mysql 数据库
 use mysql //选择mysql 数据库
 GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' WITH GRANT OPTION 
 FLUSH PRIVILEGES

    重新远程连接即可。

   使用dbvisualizer连接成功后,点击数据库任意位置,报错

[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]

查看了百度都说是表或者字段的问题,但是我没有点击表操作啊。后来换了10的版本 dbvisualizer 就可以使用了。。之前使用的是8版本的 我怀疑是mysql 驱动jar包的问题。问题解决了我就没去管了。 这样mysql 就解决了 下面就打包后台代码上传tomcat进行访问

    9.打包后台代码

vue项目部署上线遇到的问题及解决方法

    右击后台项目 export ---->MyEclipse JEE ------>WAR file

vue项目部署上线遇到的问题及解决方法

    选择本地保存路径 finish打包。通过xftp将本地的war包上传到服务器的

 vue项目部署上线遇到的问题及解决方法

上传到webapps目录就行了,然后使用tomcat访问这个项目,tomcat会自动解压的

进入  /usr/local/tomcat/tomcat7/logs  

tail -f catalina.out   //查看日志 其他日志命令请自行百度

 10.vue项目打包

      axios post 请求无法访问后台以及数据无法传输解决

proxyTable: { // 在这里配置如下代码
 '/api': {
  //target:'http://localhost:8080/', // 你请求的第三方接口GradeSystem
  //target:'http://www.ruoyechenxi.com:8080/GradeSystem', // 你请求的第三方接口
  target:'http://www.ruoyechenxi.com:8080', // 你请求的第三方接口
  changeOrigin:true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
  pathRewrite:{ // 路径重写,
  '^/api': '' // 替换target中的请求地址,也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可。
  }
 }
 } //config文件夹下的build.js 中 dev 里面配置

页面使用axios

let params = new URLSearchParams(); //这个请自行百度
 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");

问题解决.

      打包路径问题

     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我之前是使用的@ 后来我换成了 ../ 不知道有没有影响,请自己注意下这里

vue项目部署上线遇到的问题及解决方法

       在git bash here 里面

vue项目部署上线遇到的问题及解决方法

vue项目部署上线遇到的问题及解决方法

这样就是打包成功,

vue项目部署上线遇到的问题及解决方法

在tomcat下的这个目录创建一个空目录 名字就叫作你在路由的index.js自定义的那个名字

vue项目部署上线遇到的问题及解决方法

然后将dist文件下的static文件家和index.html放在这个目录下 访问地址 http://xxxxxxx/abcd 就可以访问你的项目了 这样一般出现的路径问题就不会出现了 有的时候会出现样式错乱的问题,一般就是你在组件中修改了公共组件的样式 建议自定义样式 或者使用scoped 进行封装。

地址栏刷新 页面404 问题 参见上图  新建WEB-INF文件夹 在里面新增一个web.xml 里面的代码为

vue项目部署上线遇到的问题及解决方法

<?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>

在项目中新建此文件,里面内容自己定义。地址栏刷新问题就解决了。

至此,所有的流程就都解决了,这篇博客中基本都是参考别人的博客进行归纳总结的。毕竟也是花了点时间的。希望对大家有所帮助。毕竟流程都走完了 剩下的就是慢慢开发业务了。

总结

以上所述是小编给大家介绍的vue项目部署上线遇到的问题及解决方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 #Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 #Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 #Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 #jQuery
JS实现区分中英文并统计字符个数的方法示例
Jun 09 #Javascript
详解angular脏检查原理及伪代码实现
Jun 08 #Javascript
解析vue路由异步组件和懒加载案例
Jun 08 #Javascript
You might like
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
zf框架的Filter过滤器使用示例
2014/03/13 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
python自动化测试实例解析
2014/09/28 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
Python unittest模块用法实例分析
2018/05/25 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
vscode调试django项目的方法
2020/08/06 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
毕业生个人的求职信范文
2013/12/03 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
国培计划培训感言
2014/03/11 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
用Python实现屏幕截图详解
2022/01/22 Python