1. 打包vue项目

1.1 在 config -> index.js中把`/`改为`./`，可以避免找不到静态文件。

1.2 在 build -> utils.js 中添加下行可解决elementUI小图标不显示问题。

1.3 vue打包后放到服务器上路由不跳转，需要将路由配置文件（router -> index.js）中的 `mode:'history'` 注释掉，或者改为 hash。

1.4 使用 `npm run build` 进行打包，打包成功后生成 dist 文件夹。

2. 将打包项目部署到宝塔

2.1 搭建宝塔面板。

2.2 进入宝塔面板，此时已经在 `www/wwwroot/` 目录中创建了iot文件夹，在左侧菜单栏选择"文件"，找到 `www/wwwroot/iot` 后将dist文件拖拽到面板进行上传（也可直接上传dist文件夹里面的static文件夹和index.html文件）。

2.3 添加站点

iot.aaa.com（添加域名）
xx.xxx.xxx.xxx:10086（使用IP:端口）

2.4 在宝塔面板放行10086端口

问题：经过上面的操作后，本以为访问 iot.aaa.com 或 xx.xxx.xxx.xxx:10086 都能成功访问到网站，但结果却是：

2.5 在阿里云中进行域名解析或放行端口

域名解析
阿里云域名解析步骤
放行端口

10086端口放行完成。

但此时外网访问不到这个端口

2.6 打开站点进行配置

自此，项目部署完毕，运行结果为：

参考资料

linux服务器宝塔部署 + 前后端分离
Vue项目+宝塔面板部署网站进行线上访问
Linux宝塔端口不通

部署项目vue +阿里云服务器 + 宝塔面板相关推荐

阿里云服务器宝塔面板配置Python项目
本文仅供学习交流使用,如侵立删! 阿里云服务器使用宝塔面板搭建Python项目环境 centos7.4.5 python3.7 nginx1.18.0 1.阿里云重置服务器系统全新服务器可跳过此步 ...
阿里云服务器宝塔面板设置FTP
开启主动模式 1 阿里云服务器安全组需开通20/21端口如下图: 2 宝塔面板防火墙开启20/21端口开启被动模式 1 阿里云服务器安全组开启高位端口段 39000/40000 2 宝塔防火墙同 ...
部署项目到阿里云服务器上遇到的问题
服务器环境:Windows Server 2008R2 Enterprise 问题一(跟阿里云没关系): 在服务器上运行网站提示错误: 未能映射路径"/" 在网上找了很多解决方案 ...
tp框架部署阿里云服务器/宝塔面板
1.将你的tp框架的项目文件上传到服务器,目录是wwwroot下 2.站点设置: 3.站点修改:指定运行目录和伪静态 4.现在可以在浏览器URl地址中输出你的服务器ip地址来访问你的网站了
部署Java web项目到阿里云服务器
文章目录前提安装putty 安装BT-Panel宝塔面板安装JDK并配置环境变量安装Tomcat并开放端口后安装MySQL 本地Navicat管理远程MySQL 购买域名并解析域名及站点备案 ...
利用Jenkins自动化部署springboot项目到阿里云服务器（centos8）
背景: 最近想部署一个springboot项目到阿里云服务器里面.捣鼓了很久,构建了很多次,都失败了!实在是一脸辛酸,有点气馁~ 在此想记录一下构建的过程. 不了解Jenkins之前,觉得Jenkin ...
基于阿里云ECS+ 宝塔面板（bt） + WordPress 搭建个人主页（以独立博客为例）
宝塔面板建站 – 一键快速部署WordPress博客程序基于阿里云ECS+ 宝塔面板(bt) + WordPress 搭建个人主页(以独立博客为例) 以前总是说独立建站独立建站,但始终没有行动.这两 ...
centos ftp服务器搭建_CentOS系统云服务器宝塔面板安装以及微信小程序服务器搭建...
宝塔面板(官网http://bt.cn)是一款非常优秀的服务器管理工具,无论是系统功能还是用户界面都做的很完善很人性化,是使用Linux服务器的站长不可多得的一款工具,本文以CentOS6.5-64位 ...
服务器一般安装那种centos_CentOS系统云服务器宝塔面板安装以及微信小程序服务器搭建...
宝塔面板(官网http://bt.cn)是一款非常优秀的服务器管理工具,无论是系统功能还是用户界面都做的很完善很人性化,是使用Linux服务器的站长不可多得的一款工具,本文以CentOS6.5-64位 ...

部署项目vue +阿里云服务器 + 宝塔面板

1. 打包vue项目

1.1 在 config -> index.js中把`/`改为`./`，可以避免找不到静态文件。

1.2 在 build -> utils.js 中添加下行可解决elementUI小图标不显示问题。

1.3 vue打包后放到服务器上路由不跳转，需要将路由配置文件（router -> index.js）中的 `mode:'history'` 注释掉，或者改为 hash。

1.4 使用 `npm run build` 进行打包，打包成功后生成 dist 文件夹。

2. 将打包项目部署到宝塔

2.1 搭建宝塔面板。

2.2 进入宝塔面板，此时已经在 `www/wwwroot/` 目录中创建了iot文件夹，在左侧菜单栏选择"文件"，找到 `www/wwwroot/iot` 后将dist文件拖拽到面板进行上传（也可直接上传dist文件夹里面的static文件夹和index.html文件）。

2.3 添加站点

2.4 在宝塔面板放行10086端口

2.5 在阿里云中进行域名解析或放行端口

2.6 打开站点进行配置

参考资料

部署项目vue +阿里云服务器 + 宝塔面板相关推荐

最新文章

热门文章

部署项目vue +阿里云服务器 + 宝塔面板

1. 打包vue项目

1.1 在 config -> index.js中把/改为./，可以避免找不到静态文件。

1.2 在 build -> utils.js 中添加下行可解决elementUI小图标不显示问题。

1.3 vue打包后放到服务器上路由不跳转，需要将路由配置文件（router -> index.js）中的 mode:'history' 注释掉，或者改为 hash。

1.4 使用 npm run build 进行打包，打包成功后生成 dist 文件夹。

2. 将打包项目部署到宝塔

2.1 搭建宝塔面板。

2.2 进入宝塔面板，此时已经在 www/wwwroot/ 目录中创建了iot文件夹，在左侧菜单栏选择"文件"，找到 www/wwwroot/iot 后将dist文件拖拽到面板进行上传（也可直接上传dist文件夹里面的static文件夹和index.html文件）。

2.3 添加站点

2.4 在宝塔面板放行10086端口

2.5 在阿里云中进行域名解析或放行端口

2.6 打开站点进行配置

参考资料

部署项目vue +阿里云服务器 + 宝塔面板相关推荐

最新文章

热门文章

1.1 在 config -> index.js中把`/`改为`./`，可以避免找不到静态文件。

1.3 vue打包后放到服务器上路由不跳转，需要将路由配置文件（router -> index.js）中的 `mode:'history'` 注释掉，或者改为 hash。

1.4 使用 `npm run build` 进行打包，打包成功后生成 dist 文件夹。

2.2 进入宝塔面板，此时已经在 `www/wwwroot/` 目录中创建了iot文件夹，在左侧菜单栏选择"文件"，找到 `www/wwwroot/iot` 后将dist文件拖拽到面板进行上传（也可直接上传dist文件夹里面的static文件夹和index.html文件）。