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

前言

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

部署上线进行整理

2.流程

  1.服务器搭建

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

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

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

  3.添加ssh密钥

第一步添加密钥,会让你下载一个文件到本地然后进行绑定主机

  4.安全组

  5.登录xshell6和xftp6

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

xshell6登录 主机为你的外网ip

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

  xftp的登录一样

  6.安装jdk

  参考文档:

  7.tomcat 安装

  参考文档 : 

 

  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用户组,有就跳过 没有就创建 括号里为判断信息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'; //修改数据库密码
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, 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 executed, 0 row affected, exec/fetch time: 0.000/0.000 sec [0 successful, 0 warnings, 1 errors] 

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

  9.打包后台代码

  右击后台项目 export ---- myeclipse jee ------ war file

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

 

上传到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;
 this.$axios.then {
 alert;
 th.$router.push;
 }).catch {
 alert;
 }); 

后端代码

resp.setheader;
resp.setheader; 

问题解决.

  打包路径问题

  config文件下的build.js 中的 build 代码块中

index: path.resolve,
 // paths
 assetsroot: path.resolve,
 assetssubdirectory: 'static',
 assetspublicpath: './',
 productionsourcemap: false, 

在router文件夹下的index.js添加 base '/自定义文件夹名/' 上面import我之前是使用的@ 后来我换成了 ../ 不知道有没有影响,请自己注意下这里

  在git bash here 里面

这样就是打包成功,

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

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

地址栏刷新 页面404 问题 参见上图  新建web-inf文件夹 在里面新增一个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 

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


总结

新闻聚焦
猜你喜欢
热门推荐
  • vue项目部署上线遇到的问题及解决方

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

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

    2019-08-22 来源: 浏览:79 次

    分享
  • PHP面向对象分析设计的61条军规小结

    PHP面向对象分析设计的61条军规小结

    所有数据都应该隐藏在所在的类的内部。 类的使用者必须依赖类的共有接口,但类不能依赖它的使用者。 尽量减少类的协议中的消息。 实现所有类都理解的最基本公有接...

    2019-08-22 来源: 浏览:50 次

    分享
  • AI自由变换工具中的透视该怎么使用

    AI自由变换工具中的透视该怎么使用

    前面我们都一一讲解了自由变换工具的各种功能,今天这节我们来学习它的最后一个功能:透视功能。1、为了好说明,我们现在用矩形工具在画布上画一个矩形图形2、用...

    2019-08-22 来源: 浏览:75 次

    分享
  • python之Flask实现简单登录功能的示例代

    python之Flask实现简单登录功能的示例代

    使用flask-wtf做登录的表单验证,这里简单做了账号密码不为空如,当我们不填写密码时,点击登录:model/_init_.py# config=utf-8 .........

    2019-08-22 来源: 浏览:78 次

    分享
  • C#使用Directoryinfo类获得目录信息和属

    C#使用Directoryinfo类获得目录信息和属

    本文实例讲述了c#使用directoryinfo类获得目录信息和属性的方法。分享给大家供大家参考。具体如下:using system;using system..........

    2019-08-20 来源: 浏览:61 次

    分享
  • 提升网站关键词排名的4大绝招分享

    提升网站关键词排名的4大绝招分享

    不管是大的门户网站还是小的企业网站,无不为关键词排名提升而揪心,排名上不去揪心,排名上去了没流量更揪心,所以必须要有强有力的关键词选取和排名提升的方法...

    2019-08-20 来源: 浏览:39 次

    分享
  • 超全自媒体变现方式:3类8种方式告诉

    超全自媒体变现方式:3类8种方式告诉

    目前微信公众号这么多,早已经过了红利期,那么如何做好一个公众号,如何通过一个微信公众号来变现养活自己呢?首先,微信公账号的盈利模式无非就是依据品牌导入...

    2019-08-20 来源: 浏览:99 次

    分享
  • 苏醒砸的电视是什么牌子的?这回真

    苏醒砸的电视是什么牌子的?这回真

    欧冠半决赛次回合的比赛中,利物浦4-0战胜了巴萨,以总比分4-3淘汰对手晋级欧冠决赛。图片截取自视频图片截取自视频巴萨死粉、歌手苏醒本场在家中与朋友聚会看球时...

    2019-08-20 来源: 浏览:4 次

    分享
  • Python  操作 MySQL 数据库

    Python 操作 MySQL 数据库

    import pymysql #python3conn=pymysql.connect #字符集不是必须的cursor = conn.cursorsql="se.........

    2019-08-15 来源: 浏览:10 次

    分享
  • 文本溢出插件jquery.dotdotdot.js使用方法

    文本溢出插件jquery.dotdotdot.js使用方法

    插件下载地址:https://github.com/frdh/jquery.dotdotdot引入jquery.js和jquery.dotdotdot.jssc.........

    2019-08-15 来源: 浏览:86 次

    分享
  • PS怎么利用路径快速画出简单的花朵

    PS怎么利用路径快速画出简单的花朵

    1、调出椭圆工具,并且把工具模式设置为:路径2、按ctrl+r,调出标尺,再拉出两条参考线,这两条参考线相交;再调出椭圆工具,以相交点为中心画出一个正圆形路径。...

    2019-08-15 来源: 浏览:61 次

    分享
  • 枚举getClass、getDeclaringClass区别

    枚举getClass、getDeclaringClass区别

    枚举getClass、getDeclaringClass区别 1):“不含抽象方法”,所有枚举常量未重写方法,的class getClass与getDeclar.........

    2019-08-15 来源: 浏览:16 次

    分享
  • 选择排序的理解

    选择排序的理解

    .........

    2019-08-13 来源: 浏览:47 次

    分享
  • C++ 单例模式(懒汉、饿汉模式)

    C++ 单例模式(懒汉、饿汉模式)

    // 饿汉模式的关键:初始化即实例化singelton *singelton::single = new singelton;int singelton::m_.........

    2019-08-13 来源: 浏览:89 次

    分享
  • 洛谷 P1141 01迷宫题解

    洛谷 P1141 01迷宫题解

    对于60\%60%的数据,n 100,m 100n 100,m 100;对于100\%100%的数据,n 1000,m 100000n 1000,m 10000.........

    2019-08-13 来源: 浏览:57 次

    分享
  • Java连载12

    Java连载12

    一、集成开发环境1.什么是集成开发环境集成开发环境可以使软件开发变得更简单没有ide工具:i.需要安装jdk,需要配置环境变量;需要手动的将java源文件编译生.........

    2019-08-13 来源: 浏览:43 次

    分享
  • c#使用SoundPlayer播放wav格式音频

    c#使用SoundPlayer播放wav格式音频

    1.引用system.media名称空间下的类soundplayer soundplayer player = new soundplayer;2.方法.........

    2019-08-08 来源: 浏览:15 次

    分享
  • bin文件夹下的某个dll总是自动刷新为

    bin文件夹下的某个dll总是自动刷新为

    如上图所示,一般这种问题都是dll版本和配置文件中的dll版本对应不上才引起的,可以通过替换对应版本的dll或者修改配置文件中的版本号即可。然而我的情况是:修复...

    2019-08-08 来源: 浏览:48 次

    分享
  • WeihanLi.Npoi 导出支持自定义列内容啦

    WeihanLi.Npoi 导出支持自定义列内容啦

    之前也有网友给提出过希望列合并或者自定义列内容的 issue 或请求,起初因为自己做 weihanli.npoi 这个扩展的最初目的是导入导出的简单化,使用这个.........

    2019-08-08 来源: 浏览:51 次

    分享
  • 1. mvc 树形控件tree + 表格jqgrid 显示界

    1. mvc 树形控件tree + 表格jqgrid 显示界

    [{"id":"1","text":"系统管理","value":"1","parentnodes":"0","showcheck":false,"isexpa.........

    2019-08-08 来源: 浏览:25 次

    分享
换一换
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。