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

我不是女神ヾ 2023-07-21 13:28 16阅读 0赞

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

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

### 方式一：部署到Tomcat ###

--------------------

#### 一、打包项目(脚手架创建的项目) ####

###### 1、编辑config目录下的index.js和 prod.env.js配置文件 ######

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

*  assetsPublicPath: './'配置打包后index.html中使用的是相对路径

*  assetsPublicPath: '/'配置打包后index.html中使用的是绝对路径

*  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、访问项目失败 ######

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dueF81MjA1NQ_size_16_color_FFFFFF_t_70]

###### 2、js静态资源路径缺失 ######

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dueF81MjA1NQ_size_16_color_FFFFFF_t_70 1]

> 如图：/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>
    
    重启服务，再次刷新，问题解决。

![在这里插入图片描述][2020040417081395.png]

###### 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  
    ![在这里插入图片描述][2020040712270827.png]  
    ②随便点击一个选项按钮（商品列表），进行第一次的路由跳转，跳转正常。此时浏览器url ：  
    http://www.ycmall.com:8080/ycmall-web/pms/product  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dueF81MjA1NQ_size_16_color_FFFFFF_t_70 2]  
    ③再点击其他选项按钮（品牌管理），进行第二次的路由跳转，跳转失败。此时浏览器url ：  
    http://www.ycmall.com:8080/ycmall-web/pms/product。  
    可以看到报错原因是url路径中多了一层/pms/造成的  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dueF81MjA1NQ_size_16_color_FFFFFF_t_70 3]
 *  错误修正  
    ①修改config/index.js配置文件，重新打包上传

# config/index.js 文件
    module.exports = {
      dev: {
       ... ...
      },
      build: {
        ... ...
        assetsSubDirectory: 'static',
        assetsPublicPath: '/ycmall-web/',     # 修改为自己项目名(上传到服务器的文件夹的名称)
        ... ...
      }
    }

②重启tomcat，问题解决

### 方式二：部署到Nginx ###

--------------------

#### 一、打包项目上传Vue项目 ####

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

![在这里插入图片描述][20200404171010595.png]

#### 二、修改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 ‘<’

![在这里插入图片描述][20200404171138528.png]

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

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

--------------------

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dueF81MjA1NQ_size_16_color_FFFFFF_t_70]: /images/20230528/e88c825c898e481d967508197e01e83d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dueF81MjA1NQ_size_16_color_FFFFFF_t_70 1]: /images/20230528/3e590bc659a044b583f29d1bdd73f023.png
[2020040417081395.png]: /images/20230528/6ab89059117341da9a2e5b68d3742367.png
[2020040712270827.png]: /images/20230528/7cc1b202b6a144758f16c07444f4b903.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dueF81MjA1NQ_size_16_color_FFFFFF_t_70 2]: /images/20230528/94118fceee434d9ca101cb1f462d2d7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dueF81MjA1NQ_size_16_color_FFFFFF_t_70 3]: /images/20230528/0c7aca3a63fa4bb99654773a8ba5a055.png
[20200404171010595.png]: /images/20230528/f278558290bb41a4b0c82cc4faed9be8.png
[20200404171138528.png]: /images/20230528/a3617d82495941cc96e3a21efdcb2160.png