
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连了半天连不上，找遍全网也不知道问题出在哪，然后把系统一换秒成功(应该都是可以自由换系统的吧)

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

先进入服务器后台