Linux部署前端Vue项目

ゝ一纸荒年。 2024-04-01 17:54 88阅读 0赞

## Linux部署前端Vue项目 ##

### 1 部署到tomcat上 ###

#### 1.1 部署Vue项目 ####

1.  打包项目

在命令行终端，输入命令，打包项目：

npm run build

1.  将生成的dist文件夹下的所有内容复制到tomcat的webapps下

"推荐":在webapps下新建一个文件夹，例如yygh-admin，然后将dist文件夹内容复制进去

1.  启动tomcat，并输入访问地址

http://192.168.145.48:8080/yygh-admin/

> yygh-admin为项目名

`注意：`  
如果输入url后，页面一片空白，可能是因为js、css文件找不到，可能是打包路径问题：

*  vue-cli3以上：  
    将vue.config.js文件中的module.exports下的`publicPath`修改为：`'./'`

module.exports = {
        
    	/* 其他配置信息... */
    	publicPath: '/xxx/'   
    	/* 
     	 *  `publicPath` 里面的内容就是配置路径，如果你在服务器根目录下创建一个
      	 *  `newproject`文件夹，那么就需要配置成`/newproject/`。
      	 *  那么访问路径就是`www.test.com/newproject`
      	 */
    }

*  vue-cli3一下版本：  
    将vue项目中的config文件夹下的index.js的`assetsPublicPath`修改为`'/yygh-admin/'`(改为自己tomcat下webapps的文件夹名即可)

build: {
        
    	assetsPublicPath: '/xxx/' // 默认为'/' ，xxx是webapps下的文件夹名
    }

#### 有关tomcat的tips： ####

##### ①修改tomcat地址栏上的图标 #####

- 进入tomcat的webapps/ROOT目录
    - 将favicon.ico换成自己的图片即可

##### ②tomat中文乱码 #####

*  如果是tomcat控制台乱码

> （一般tomcat出现乱码都是字符集的问题）  
> 在tomcat目录下conf中找到logging.properties文件  
> 大概在47行处把java.util.logging.ConsoleHandler.encoding = UTF-8改为java.util.logging.ConsoleHandler.encoding = GBK 重启tomcat及可

*  tomcat访问页面时乱码  
    ![在这里插入图片描述][9adaef1cbeef4764a9592849191234a2.png]

1.  在tomcat目录的bin文件下找到catalina.bat修改216行左右  
    set"JAVA\_OPTS=%JAVA\_OPTS% %JSSE\_OPTS%" 修改为set"JAVA\_OPTS=%JAVA\_OPTS% %JSSE\_OPTS%" -Dfile.encoding=UTF-8 -Dsun.jnu.encoding=UTF-8
2.  在tomcat的server.xml配置  
    添加：URIEncoding=”UTF-8”

1.  在项目的idex.html(项目首页)  
    添加：content=“text/html”; charset=“utf-8”  
    (head - meta - title)

1.  在tomcat的web.xml,大概119行处添加:

<init-param>
        <param-name>fileEncoding</param-name>
        <param-value>UTF-8</param-value>
    </init-param>

添加完之后效果：

<servlet>
            <servlet-name>default</servlet-name>
            <servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class>
            <init-param>
                <param-name>debug</param-name>
                <param-value>0</param-value>
            </init-param>
    		<init-param>
                <param-name>fileEncoding</param-name>
                <param-value>UTF-8</param-value>
            </init-param>
            <init-param>
                <param-name>listings</param-name>
                <param-value>false</param-value>
            </init-param>
            <load-on-startup>1</load-on-startup>
        </servlet>

1.  重启tomcat，查看效果  
    ![在这里插入图片描述][34defbdd79ce481186dbd7c423ff8dd7.png]

##### ③tomcat配置https服务 #####

1.  下载证书（可以去腾讯云申请一个一年的免费证书）

*  登录[SSL证书管理控制台][SSL]
 *  弹出的窗口中，选择申请免费证书
 *  证书类型选择`亚洲诚信`
 *  绑定自己的域名，其他的默认推荐，提交申请

> 审核很快的，我的证书几分钟就通过了

1.  下载证书

*  进入自己的[SSL证书管理平台][SSL]
 *  下载证书  
    ![在这里插入图片描述][bdae34fae48d44e893f4eb2e4d1eff59.png]
 *  根据加密类型不同，下载下来的文件类型也不同，我的有两个文件  
    ![在这里插入图片描述][7fd2744c693a4097b6e1da8d328a7c0f.png]

1.  配置tomcat的https服务  
    ①上传证书（`.jks`）到自己tomcat的conf目录下  
    ![在这里插入图片描述][bfdb1bf5a0a147f6b419cbac2ceda532.png]  
    ②修改server.xml文件

`添加443的connector:`

> 示例：

以上就可以使用https服务了。  
如果想要`http服务自动跳转到https`：

*  修改web.xml:

> 在结束标签 </welcome-file-list> 后面换行，添加以下内容

<login-config>
     
     <auth-method>CLIENT-CERT</auth-method>
     <realm-name>Client Cert Users-only Area</realm-name>
    </login-config>
    <security-constraint>
    
    <web-resource-collection>
       <web-resource-name>SSL</web-resource-name>
       <url-pattern>/*</url-pattern>
    </web-resource-collection>
    <user-data-constraint>
       <transport-guarantee>CONFIDENTIAL</transport-guarantee>
    </user-data-constraint>
    </security-constraint>

*  修改server.xml，修改80的connector

> 此修改操作可将非 SSL 的 connector 跳转到 SSL 的 connector 中。

③测试  
输入网址，回车：  
![在这里插入图片描述][89ebd8836eb047cda78d2ebfa1eeb75e.png]

参考：https://blog.csdn.net/weixin\_45947267/article/details/109417431

#### 1.2 部署Nuxt项目 ####

> 有待补充

### 2 部署到nginx上 ###

#### 2.1 部署流程 ####

##### ①安装nginx #####

如有不熟悉的朋友，参考下面这篇教程，有详细步骤。

> [Linux安装软件合集][Linux]

##### ②npm run build打包vue项目 #####

找到vue项目根目录，执行打包命令

npm run build

![在这里插入图片描述][78da10caa3c842e6b52dc45de19135af.png]  
打包成功之后会在根目录下生成一个dist文件夹  
![在这里插入图片描述][441843c82b8743ffb377b7be2874e2b0.png]

##### ③上传到nginx的html文件夹 #####

将上面生成好的dist文件夹放在nginx服务器的html文件夹下（此处我直接通过ftp传输）【传到最好将文件夹名命名为自己的项目名，例：music-manage】  
![在这里插入图片描述][129738e7596e451fb7f59b5f85c1fa58.png]

##### ④修改nginx.conf配置文件 #####

进入nginx的conf目录：

cd 自己的nginx路径

通过vim修改nginx.conf

vim nginx.conf

具体配置如下（以配置music-manage项目为例，这个项目我给它放到了ip为192.168.145.13这台虚拟机上）：

http {
        
       server {
        
            # 监听的端口号
            listen       8080;
    
            # 服务名称 生产环境要修改成 公网ip 如 47.105.134.120【网站域名】
            server_name 192.168.145.13;
    
            # 配置根目录的地址是以 nginx 下的 html 文件夹为根目录来查找的
            root html;
    
            # 配置默认的主页显示 比如 47.105.134.120:8080 显示的 index 页面
            location / {
        
                try_files $uri $uri/ /index.html;	    
            }
            # 配置我们的 admin 的前台服务 比如 47.105.134.120:8080/admin/index.html
            location ^~ /music-manage {
        
                # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
                try_files $uri $uri/ /music-manage/index.html;
            }
            # 如果你想配置多个项目的话，可以复制上面的，修改一下就可以同时部署多个前端项目了
            # 比如
            # location ^~ /blog {
        
                # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
                # try_files $uri $uri/ /blog/index.html;
            # }
            #error_page  404              /404.html;
    
            # redirect server error pages to the static page /50x.html
            #
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
        
                root   html;
            }
    
    	#css样式不显示问题解决
    	 include   mime.types;
             default_type  application/octet-stream;
    	#中文乱码问题
    	charset utf-8;
        }
    
        include servers/*;
    }

如果要配置，多个项目，配置多个server即可。

##### ⑤重启nginx，在浏览器输入ip+端口+项目名即可访问 #####

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

> 需要开放对应访问端口或关闭防火墙

上述步骤如果有遇到什么问题的可以看下面模块`部署中常见问题`

#### 2.2 部署过程中常见问题 ####

##### ①vue的build打包问题 #####

情况一：

> vue打包:Warning: Accessing non-existent property xxxx of module exports inside circular dependency  
> 原因：node版本过高

*  方式一：

> 找到`\node_modules\stylus\lib\nodes\index.js`文件，在代码前面添加：

exports.lineno = null;
    exports.column = null;
    exports.filename = null;

*  方式二：

> 可切换node至v10.版本

*  方式三：

> 升级shelljs到 v0.8.4 即可解决

npm install shelljs@0.8.4 --save

情况二：

> node的npm run build报错xxx is not a function  
> 缓存或版本对应问题

*  方式一：

删除node_modules文件夹，执行npm install重新生成

*  方式二：

查看webpack等依赖版本  
![在这里插入图片描述][9f7e5d3dcd984de2ac0196d33d1cb856.png]

*  方式三

> 查看config下的index.js环境是否正确  
> build报错，就对应build部分；dev报错就对应dev部分

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

##### ②nginx启动问题 #####

bug：如果启动Nginx如下错误

emerg] bind() to 0.0.0.0:81 failed (98: Address already in use)

表明是端口被占用了，解决办法：

*  杀死占用端口的进程

//找到对应进程号
    ps -ef|grep nginx

> UID PID PPID C STIME TTY TIME CMD  
> root 22048 2762 0 02:08 pts/0 00:00:00 grep --color=auto nginx

UID ：程序被该 UID 所拥有

PID ：就是这个程序的 ID

PPID ：则是其上级父程序的ID

C ：CPU使用的资源百分比

STIME ：系统启动时间

TTY ：登入者的终端机位置

TIME ：使用掉的CPU时间。

CMD ：所下达的是什么指令  
![在这里插入图片描述][e48847bbed394475953c5a752f6dae6c.png]  
杀死对应进程

kill -9  PID(对应的进程号即可)

*  停止nginx，重新启动

切换到nginx sbin目录
    -- 停止
    sudo ./nginx -s stop
     
    -- 启动
    ./nginx

##### ③vue的css不显示、中文乱码及图片路径问题 #####

*  css不显示

> 这是因为前端文件在被浏览器进行渲染的时候，被当做普通文本内容来进行渲染了，并不是按照js、css来进行渲染

修改nginx.conf文件，在nginx的http模块下添加配置即可

include   mime.types;
    default_type  application/octet-stream;

*  中文乱码问题

> 这其实就是一个编码问题，我们也只需要修改nginx.conf即可

在server模块下添加上charset utf-8;

*  我的nginx.conf配置，大家可以参考

http {
        
       server {
        
            # 监听的端口号
            listen       8080;
    
            # 服务名称 生产环境要修改成 公网ip 如 47.105.134.120
            server_name 192.168.145.13;
    
            # 配置根目录的地址是以 nginx 下的 html 文件夹为根目录来查找的
            root html;
    
            # 配置默认的主页显示 比如 47.105.134.120:8080 显示的 index 页面
            location / {
        
                try_files $uri $uri/ /index.html;	    
            }
            # 配置我们的 admin 的前台服务 比如 47.105.134.120:8080/admin/index.html
            location ^~ /music-manage {
        
                # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
                try_files $uri $uri/ /music-manage/index.html;
            }
            # 如果你想配置多个项目的话，可以复制上面的，修改一下就可以同时部署多个前端项目了
            # 比如
            # location ^~ /blog {
        
                # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
                # try_files $uri $uri/ /blog/index.html;
            # }
            #error_page  404              /404.html;
    
            # redirect server error pages to the static page /50x.html
            #
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
        
                root   html;
            }
    
    	#css样式不显示问题解决
    	 include   mime.types;
         default_type  application/octet-stream;
    	#中文乱码问题
    	charset utf-8;
        }
    
        include servers/*;
    }

*  图片路径问题

> 我在Login.vue中写了一个样式，通过相对路径指向图片位置，但是发现build之后访问路径有问题，因此导致我后台的背景图片无法显示

解决办法：在build/utils.js文件中添加如下一行代码即可

publicPath:'../../'

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

##### ④vue出现Uncaught SyntaxError: Unexpected token ＜ #####

> 开发 测试 启动 npm run dev 能正常访问

打包 npm run build 部署到nginx上后访问页面出现空白，浏览器F12 查看报错

Uncaught SyntaxError: Unexpected token ＜

> 主要是js引用问题:  
> npm run build 的打包时掉了 js文件的前面的引用路径

找到 build: 配置节点（一般在config/index.js文件下），  
将assetsPublicPath的值从`'/',改为`：`./`即可

assetsPublicPath: './',

然后重新打包再部署。  
![在这里插入图片描述][43e7991e412647c281b7f0f8152d1554.png]

##### ⑤端口未开放，防火墙未关，云服务器安全组未开放对应端口 #####

查看防火墙状态

systemctl status firewalld

关闭防火墙

systemctl stop firewalld

启动防火墙

systemctl start firewalld

> `注意：`直接关闭防火墙当然可以给我们省下很多事情，我们不用一个一个的去开放对应的端口，但是也会有被黑客攻击的危险。因此如果是部署在公网上的项目还是建议通过开放指定端口来实现访问项目的目的。

开放指定端口

firewall-cmd --zone=public --add-port=8081/tcp --permanent

> ①- -zone 作用域  
> ②- -add-port=8081/tcp 添加端口，格式：端口/通讯协议  
> ③- -permanent 永久生效，没有此参数，重启之后失效

查看已经开放的端口

netstat -nupl (UDP类型的端口)
    
    netstat -ntpl (TCP类型的端口)

查看指定端口的使用情况

netstat -ntulp | grep 8081

`云服务器开放端口（安全组）`：  
![在这里插入图片描述][0163435c54334a0aa5b251513dc8b279.png]

[9adaef1cbeef4764a9592849191234a2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/cbda326718b341aa9eb30ddea3ec4cfc.png
[34defbdd79ce481186dbd7c423ff8dd7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8a7e0151df89448b8fde243ace1c1500.png
[SSL]: https://console.cloud.tencent.com/ssl
[bdae34fae48d44e893f4eb2e4d1eff59.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d58a254d44714fc3bbba692bc7277fca.png
[7fd2744c693a4097b6e1da8d328a7c0f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0fe6d808b3654aaaaf76a81b6ccc718a.png
[bfdb1bf5a0a147f6b419cbac2ceda532.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/781d139e4edd45ceb9cd4121244bcad3.png
[89ebd8836eb047cda78d2ebfa1eeb75e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/03dc54d249004787a660e95102afac55.png
[Linux]: https://editor.csdn.net/md/?articleId=127816970
[78da10caa3c842e6b52dc45de19135af.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9962dd3f15934263a12ffefed32087e0.png
[441843c82b8743ffb377b7be2874e2b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e944704b6f864b4b8671a503df3601e9.png
[129738e7596e451fb7f59b5f85c1fa58.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ef04bfd44bde47a8b4b758d4e4d66146.png
[98aa55a41dec4972be7caf93e9812ff4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8b210d040f61467296a02e08f6ccc66b.png
[9f7e5d3dcd984de2ac0196d33d1cb856.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a52b4fc80c7f41faaf9181a27007ced3.png
[5bf4e96f05084e6fa4ae0c1fd70d5bf1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c50eae73ccf74e2f92f059ca0dea7368.png
[e48847bbed394475953c5a752f6dae6c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/af9168f7426e4b5ba9cd416532aeac0f.png
[2216ee092bb34204b41dba6403416e9b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/69cb957d17a04859a4a31fed865cec6d.png
[43e7991e412647c281b7f0f8152d1554.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b98efab3d45e4110bb3d3697372c2583.png
[0163435c54334a0aa5b251513dc8b279.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/cf011d88538345adbf9c7b9ca5ddc3cb.png