vue3项目打包到上线到云服务器遇到的种种问题

最近刚写完自己的第一个项目，过程中就有蛮多想写的，但没想到打包上线等收尾工作最让我头大，所以就先写这些了(项目过程中遇到的问题有时间也会发的)，菜鸟，很多概念都不是很清晰，但因为自己在遇到问题的时候很希望能找到一篇详尽的文章，所以有了这篇，希望能帮到你

目录

一,打包

1.页面空白问题

2.路由失效问题

(1)改路由history模式为harsh模式

(2)自己配置后端

(3)配置nginx

二,上线

1.内网穿透

2.云服务器

(1)免费域名+服务器

(2)云服务器

---

一,打包

1.页面空白问题

配置vue.config.js,没有就在根目录创建一个

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',

})

2.路由失效问题

有三种方法

(1)改路由history模式为harsh模式

(路径有#号)

import { createRouter, createWebHashHistory } from 'vue-router'
import routes from './routes'

const router = createRouter({
    history: createWebHashHistory('/'),
    routes
})

export default router

优点:便捷,想部署到类似github pages这种只能传静态页面的的唯一选择

缺点:丑；锚点跳转失效

锚点失效解决方案:

取消a标签href,改为点击事件跳转

<a @click="isAct(data.title)">

 跳转实现方法有很多,我这里用的scrollIntoView,受页面渲染影响,所以加个nextTick

function isAct(i){
            //scrollIntoview因为页面没渲染而出问题
            nextTick(()=>document.getElementById(i).scrollIntoView())
            }

(2)自己配置后端

我是用的express:

引入中间件:npm install --save connect-history-api-fallback

//history路由 
const history = require('connect-history-api-fallback');
app.use(
    history({
        disableDotRule: true,
        verbose: true,
    }),
)

关于history的配置内容不少,这里就不多解释了 

将前端打包后的文件夹dist放入后端根目录并作为静态资源引入,注意history要在静态资源引入之前

const path = require('path')
//静态资源引入
app.use(express.static(path.join(__dirname, './dist')));

之后通过http://127.0.0.1: + 端口号就能正常访问了

注意：并不是说你的页面向你配置了history的服务器发送请求，你的页面就能用history了！怎么可能向某个服务器发请求能改变代码层面的配置！这个误区困了我好久，跳出来之后又觉得很蠢

(3)配置nginx

本质也是服务器实现重定向，我没用过，因为我想着我已经写了个服务器了为什么还要用个代理服务器,相关教程有很多,我就不贴啦

二,上线

我一直以为项目上线是部署到外网人人都能访问的，查了许多才意识到部署本地服务器就算上线了，也就是说上面我用express写的本地服务器引入前端页面就已经是上线了

但我相信应该有许多新手跟我一样有这种误解，并且都想让别人能够访问自己的项目，那么有两种方法：

1.内网穿透

(如果没有配置服务器或nginx请忽略)可以让你的本地服务器变成云服务器一般(我不知道用什么术语形容)，只需要提供你本地服务器的端口号，就能返回一个域名，可以访问到你的页面或者数据

这个我体验不深，没法推荐哪家的更好，但应该都有免费的大家可以试试(免费的域名不固定，且服务器很慢，不推荐长期使用),我用的是natapp,跟着官方文档配置就好了

配置好后如果前端有向后端发请求那么控制台可能会报:The request client is not a secure context and the resource is in more-private address space private.
这是因为前端发请求的地址还是本地的,向一个更私有的IP发请求被Chrome视为不安全的

治标:改浏览器配置,在地址栏输入:

chrome://flags/#block-insecure-private-network-requests

将第一项的default改为disable;

治本:将前端请求路径要改成natapp返回的域名,随机域名的弊端就体现出来了,每打通一次就要改一次代码,如果只是自己试着玩且前后端公用一个服务器,可以将请求地址动态改为当前页面地址

let a=()=>{
                axios({
                url:`${window.location.href}`,
                method:'GET'}).then(res=>d.value=res.data)
            }

2.云服务器

(1)免费域名+服务器

很多人学前端看过黑马吧，里面有提到一个免费的服务器和域名免费空间-free.3v.do 提供100M永久香港免费ASP空间申请，但是这个服务器和github pages一样,只能上传静态的页面，也就是说，你没法配置任何后端相关的东西，包括前面提到的vue路由history模式的适配。

所以如果你的网站有用到history页面路由，或者你需要你的前端和后端在一个服务器里，那么请忽略此项.

如果你的路由是harsh的且前后端不在一个服务器或者没有后端,这是不错的选择(国内gitee也有pages功能,但需要认证,有点麻烦)

免费空间通过ftp上传,教程:29-申请免费空间以及网站上传_哔哩哔哩_bilibili

 github pages通过git上传,教程:使用Github将本地项目部署到线上的步骤（免费，不需要购买域名和服务器）_github部署项目_耶啵奶膘的博客-CSDN博客

这个免费空间和github pages两个我都尝试了:

免费空间的:myblog (3vzhuji.cc)

github pages:myblog (sbyder.github.io) 

 可以发现部署在github上的控制台报错

这是因为github提供的域名是https协议,而我的后端是部署在协议为http的云服务器上的,而https向http发请求会被浏览器视为不安全的行为而阻止,(基于阿里云的)解决方案为: 

先买一个域名,然后根据申请免费DV单域名试用证书 (aliyun.com)

将你的服务器的协议升级为https就可以了

(2)云服务器

正经买个云服务器，当然许多都有新人或者学生优惠，可以免费试一段时间，再看要不要续费或者换配置

关于服务器的各种配置很多文章都有，这里就不多说了(其实允许试用的配置也没啥选择空间)，但服务器系统推荐linux(推荐Centos操作)，linux各种优势就不多说了，还有个重点是论坛上云服务器部署的教程也大多是基于linux的，别像我一样整了个windows系统然后跟着教程用xshell连了半天连不上，找遍全网也不知道问题出在哪，然后把系统一换秒成功(应该都是可以自由换系统的吧)

选完服务器之后在服务器后台需要操作的不多，只需要配置安全组，也就是端口(以下示例基于阿里云服务器,应该都大差不差)

先进入服务器后台

 (我也不知道该遮啥,索性全遮了)

 

8888端口是待会宝塔面板要用的,再开些你的项目中用到的端口 

然后就是操作服务器了，不一定要用xshell，很多教程都是通过xshell安装宝塔面板，再通过宝塔面板操作服务器的，但宝塔官网就有一个远程工具宝塔SSH终端:一款同时支持SSH和SFTP客户端的免费软件! (bt.cn)两者其实大差不差，自行选择

这里讲宝塔远程工具怎么操作,安装好后点左边的加号,弹出来这个窗口

用户名默认是root和密码是买服务器时设置的，之后通过指令安装宝塔面板,这里是不同操作系统安装宝塔面板的指令:宝塔面板下载，免费全能的服务器运维软件 (bt.cn)

在远程工具输入后会有两个问题 

摁两次y就行,然后等,直到弹出 

这一大段最好复制下来 ,通过外网面板地址进入宝塔面板,输入刚给的用户名和密码,成功进入

最后在宝塔面板上的操作就通俗易懂了，首先是去软件商店安装环境，就跟你自己写项目的时候一样

 

其次就是导入项目(在这个目录下)

然后在项目文件所在终端运行

 

可以安装个PM2来运行,这样稳一点

 

左上角添加项目,进行配置

最后有个问题，我在我项目中用到的端口在阿里云服务器后台配置了安全组访问不到，得在宝塔面板配置才行