Vue项目部署到阿里云服务器过程及注意事项

平时都是使用"印象笔记"随手写一些笔记之类的东西,久而久之就导致记录的内容会有重复,相同的东西可能被记录了多次,东一块西一块的,内容过于分散且不够精简。正好最近在整理"印象笔记"中的内容,借此机会把一些整理好的内容发布出来供大家参考,自己也顺便回顾一下,全当是复习了。

这里我们讲的部署方式有两种,一种是使用Tomcat部署,一种事使用Nginx部署

方式一:部署到Tomcat


一、打包项目(脚手架创建的项目)
1、编辑config目录下的index.js和 prod.env.js配置文件

注意:线上环境assetsPublicPath: './'必须这样配置,否则打包后部署到服务器上会找不到静态资源而显示空白页。

  • assetsPublicPath: './'配置打包后index.html中使用的是相对路径
<script type=text/javascript src=./static/js/manifest.bafe42ed3549357642fd.js>
  • assetsPublicPath: '/'配置打包后index.html中使用的是绝对路径
<script type=text/javascript src=/static/js/manifest.bafe42ed3549357642fd.js>
  • index.js
module.exports = {
  dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',               // 注意这里,两个环境设置的不同
    proxyTable: {},
    host: 'localhost', 
    port: 8090, 
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, 
    devtool: 'cheap-module-eval-source-map',
    cacheBusting: true,
    cssSourceMap: true
  },
  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',               // 注意这里,两个环境设置的不同
    productionSourceMap: true,
    devtool: '#source-map',
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  }
}
  • prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"http://123.456.78.901:8099"'     // axios访问的后台接口服务器地址和端口号
}
2、执行打包命令
npm run build
二、配置Nginx服务器

自己没有备案申请域名,为了好记,所以就本地配置一个域名。该步骤可以省略,直接输入http://123.456.78.901:8080/vueWeb也可以访问项目

1、安装Nginx
2、编辑nginx.conf文件
server {
        listen  80;
        server_name  www.vueWeb.com;
        location / {
            # 配置了hosts不用管这里
            # proxy_pass http://localhost:8080; 
        }
 }
3、编辑hosts文件
文件位置:
    C:\Windows\System32\drivers\etc
在文件末尾追加一下内容:
    123.456.78.901 www.vueWeb.com
4、启动Nginx
三、上传到服务器并启动
1、把打包后的dist文件夹上传到服务器tomcat/webapps目录
2、把dist目录改名为vueWeb(自己的项目名)
[root@tony webapps]# pwd
    /usr/local/tomcat/webapps
[root@tony webapps]# ll
    total 24
    drwxr-x--- 16 root root 4096 Apr  1 14:06 docs
    drwxr-x---  6 root root 4096 Apr  1 14:06 examples
    drwxr-x---  5 root root 4096 Apr  1 14:06 host-manager
    drwxr-x---  5 root root 4096 Apr  1 14:06 manager
    drwxr-x---  3 root root 4096 Apr  1 14:06 ROOT
    drwxr-xr-x  3 root root 4096 Apr  1 16:59 vueWeb
[root@tony webapps]#
[root@tony vueWeb]# pwd
    /usr/local/tomcat/webapps/vueWeb
[root@tony vueWeb]# ll
    total 8
    -rw-r--r-- 1 root root 1168 Apr  3 15:00 index.html
    drwxr-xr-x 7 root root 4096 Apr  3 15:00 static
[root@tony vueWeb]#
3、启动tomcat
[root@tony bin]# pwd
    /usr/local/tomcat/bin
[root@tony bin]# ./startup.sh
4、在浏览器访问项目
在浏览器输入地址 :http://www.xxx.com/vueWeb(项目名)
注意事项:
1、访问项目失败

如果访问项目失败,看一下自己服务器实例的安全组有没有开放相应的端口号,自己配置的多少端口,就在安全组中添加相应的端口

在这里插入图片描述

2、js静态资源路径缺失

进入系统后,点击登录或者其他页面跳转的事件,可能会出现访问后台接口正常,但是访问js文件等报错404,导致页面加载不出来的问题

在这里插入图片描述

如图:/login请求正常,跳转到登录后的主页时,两个js文件访问失败。问题原因是js文件的访问路径错误,如图中访问的是:http://www.vueWeb.com/static/js/xxx.js,但其实真正的地址应该是:http://www.vueWeb.com/vueWeb/static/js/xxx.js。由此可见问题出在路由跳转上,那么我们需要对router/index.js做如下配置,这样在路由跳转时,会在每一个路由地址前边拼接上一个/vueWeb/

export default new Router({
  mode: 'history', 
  base:'/vueWeb',               // 添加一个base路径(也就是项目的名称)
  scrollBehavior: () => ({y: 0}),
  routes: constantRouterMap
})
3、刷新页面报错404

当把Vue项目部署到阿里云上的tomcat后,访问项目,进入子目录,然后点击刷新重新加载页面会提示错误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>

重启服务,再次刷新,问题解决。

在这里插入图片描述

4、进入系统没问题,但是进行路由跳转时报错
  • 发生错误时配置文件的状态
# config/index.js 文件
module.exports = {
  dev: {
   ... ...
  },
  build: {
    ... ...
    assetsSubDirectory: 'static',
    assetsPublicPath: './', 
    ... ...
  }
}


# router/index.js 文件
export default new Router({
  mode: 'history',
  base:'/ycmall-web',
  scrollBehavior: () => ({y: 0}),
  routes: constantRouterMap
})

# 其他nginx.conf等配置和上边一致,没有发生改变
  • 错误说明
    ①进入项目后,直接进行刷新操作,报错404
    在这里插入图片描述
    ②随便点击一个选项按钮(商品列表),进行第一次的路由跳转,跳转正常。此时浏览器url :
    http://www.ycmall.com:8080/ycmall-web/pms/product
    在这里插入图片描述
    ③再点击其他选项按钮(品牌管理),进行第二次的路由跳转,跳转失败。此时浏览器url :
    http://www.ycmall.com:8080/ycmall-web/pms/product。
    可以看到报错原因是url路径中多了一层/pms/造成的
    在这里插入图片描述
  • 错误修正
    ①修改config/index.js配置文件,重新打包上传
# config/index.js 文件
module.exports = {
  dev: {
   ... ...
  },
  build: {
    ... ...
    assetsSubDirectory: 'static',
    assetsPublicPath: '/ycmall-web/',     # 修改为自己项目名(上传到服务器的文件夹的名称)
    ... ...
  }
}

②重启tomcat,问题解决

方式二:部署到Nginx


一、打包项目上传Vue项目

在任意路径下创建文件夹mall-web(存放打包的项目的地方),把打包好的dist文件夹中的内容上传到该目录下,路径下的内容如图

在这里插入图片描述

二、修改nginx.conf配置文件
server {
        listen       8090;                             # 浏览器中访问时需要输入的端口号
        server_name  123.456.78.901;                   # 自己服务器的外网ip地址

        location / {
	    root /usr/local/nginx/mall-web/;               # 步骤一中创建的文件夹路径(项目存放的地方)
	    index index.html;
	    try_files $uri $uri/ @router;                  # 处理刷新页面时显示空白页问题
        }
        
        location @router{                              # 处理刷新页面时显示空白页问题
            rewrite ^.*$ /index.html last;
        }
}
三、重启nginx
[root@tony sbin]# pwd
    /usr/local/nginx/sbin
[root@tony sbin]# ./nginx -s reload
四、在浏览器中访问项目
http://123.456.78.901:8090
注意事项
1、显示空白页

访问成功后刷新页面,显示空白页,浏览器console报错Uncaught SyntaxError: Unexpected token ‘<’

在这里插入图片描述

该问题是在基于原有配置的基础上发生的,通过修改vue项目中config/index.js文件后,重新打包项目并上传,重新启动nginx后问题解决
什么原理还没搞清楚,网上搜了一堆,全是复制粘贴后发表出来的文章,千篇一律,也不管能不能解决问题。
网上大部分说的都是像步骤二中那样修改nginx.conf文件,但是亲自试验后还是不行。在此基础上又按如下修改了index.js文件才解决问题(什么原理不清楚,有知道的大佬可以留言说一下)

module.exports = {
  dev: {
   ... ...
  },
  build: {
    ... ...
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',               # 注意这里,原来是 './',修改为 '/'
    ... ...
  }
}

------ 感谢您的阅读 ------
如果您认为文章对您有所帮助的话,劳烦您动动您可爱的小手点个赞,您的认同是我创作最大的动力!

  • 9
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值