Vue+koa2 打包启动本地服务器-资源加载问题

最新推荐文章于 2024-01-15 11:24:09 发布
最新推荐文章于 2024-01-15 11:24:09 发布
阅读量909 收藏 1
点赞数
分类专栏： node vue JavaScript 文章标签： vue打包 koa2 koa-generator 本地服务加载网页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iOSTianNan/article/details/103085463
版权
本文介绍了使用Vue+Koa2搭建本地服务器加载打包后的网站，解决白屏、资源丢失等问题。主要涉及技术栈包括Koa2和Vue，利用koa-generator和vue-cli3作为构建工具。在vue.config.js中调整公共路径解决白屏问题，并通过koa-static中间件正确设置静态资源路径，确保字体和图片等资源能被正确加载。
摘要由CSDN通过智能技术生成
记录一下,通过vue+koa2 启动一个本地服务器加载你的打包后网站, 主要目的是打通, 这里借助几个脚手架来帮助我们搭建项目, 具体网页你自己实现
主要技术栈

koa2 + vue

具体cli

koa-generator + vue-cli3

koa2 --version => 1.1.17
node --version => v12.9.0
vue --version => @vue/cli 4.0.5

记录一下从 打包vue前端页面 以及 koa2 启动本地服务, 加载vue静态页面后, 遇到的字体/图片/

最低0.47元/天 解锁文章
iOSTianNan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue打包完部署到服务器运行(express、koa)
balloonhunter的博客
06-07 1123
当Vue项目完成后，就需要打包文件，然后部署到服务器上。 Vue打包完成后会在项目的根目录下生成一个dist文件夹，里面存放了所需的文件，将其部署到服务器上并进行相应配置，即可通过浏览器访问。 express框架 1.安装express和express-generator npm install express --save npm install express-generator -g (此处为全局安装) 2.创建express项目 express expressServer // expressS
记一些云服务器上部署koa2项目遇到的问题
weixin_30338743的博客
07-30 250
云服务器系统版本centos7.2，部署的项目koa2，node版本: 10.16.0 一、pm2的一些问题 1、安装pm2: 　　npm install -g pm2 2、建立软链接，使pm2能全局使用 　　ln -s 软件安装的路径 目标路径 　　例子: ln -s /usr/local/node/bin/pm2 /usr/bin/pm2 3、进入到koa2项目中，使用...
koa和vue项目前后端联动启动
瑞朋哥的博客
05-10 1377
最近学习前后端的全栈项目，头大的要命，慢慢发现，自己越用功想研究一门技术，越发现不懂的慢慢越多，真是有点打击信心。 好在，今天终于把前后端的基础框架搭起来了，后续文章分享学习经验。 今天分享是前后端联动启动 首先安装concurrently 然后安装vue项目 vue -V 我现在已经装上3.0版本了。 vue create client 按照提示把vue-router ...
小白初试koa2+vue项目搭建--在线便利贴--我想成为全栈
weixin_33738555的博客
03-08 492
前记 做为一个从去年六月才开始学习前端的新手，终于终于。。。我花了四天写出了我人生中的第一个前后端都是自己完成的项目，emmm，废话不多说，先放图片和链接 预览地址 前端代码 后端规范 设计思路--后端 这是我写的第一个后端项目，因为对async和await语法的支持我选择了koa2，因为是第一次写后端，前期只是注重实现功能，却对后端返回的数据规范并没有进行详细设计，等到我开始写前端的时候...
vue+Nodejs+Koa搭建前后端系统（二）--koa-generator创建项目及分析
小阳的博客
04-15 1176
采用上一篇vue+Nodejs+Koa搭建前后端系统（一）–简易版创建的项目目录的基础上，创建新的后端服务项目server2使用脚手架创建后端项目计算机系统为Windows 10 专业版小说中，终成眷属一般就结局了，但现实是生活一直在继续，我们一直在调试生活的方式来满足我们有恃无恐的安全感。上一篇只是简单地搭建了后端服务器。这回我们要利用koa的脚手架搭建后端项目框架。
node+koa2+mySql+vue+webpack全栈项目.zip
10-21
这个项目基于Node.js的Koa2框架作为后端，MySQL作为数据库，Vue.js作为前端框架，以及Webpack作为模块打包工具。以下是对这些技术的详细说明： 1. **Node.js**：Node.js是一个基于Chrome V8引擎的JavaScript运行...
基于Vue + axios + vuex + webpack + koa + mysql +Linux 开发PC端网站
最新发布
02-10
这个项目的核心技术包括Vue.js、axios、vuex、webpack、Koa.js、MySQL以及Linux，它们各自承担着不同的职责，共同构建出一个完整的Web应用。 1. **Vue.js**：Vue.js 是一个轻量级的前端JavaScript框架，它强调组件...
vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019
PGguoqi的博客
04-19 8804
未完
前端vue后端koa数据库采用的mysql开发完整的前后端项目
08-09
2. Koa：Koa 是由Express团队开发的一个基于Node.js的下一代web应用框架，它的设计目标是提供更小、更富有表现力、更健壮的基础，让开发者能够编写出更优雅的Node.js服务。在本项目中，Koa作为后端服务器，处理HTTP...
使用koa2vue2搭建自己的博客系统
08-10
使用koa 2 vue 2搭建自己的博客系统
Vue+Koa2 打包后进行线上部署的教程详解
12-11
最近使用Vue和Koa2重构了自己的博客，过程中踩了不少坑，查了很多资料，最后总算成功上线。之后我计划围绕这个过程写一系列文章，讲讲如何用Vue+Koa2写一套网站。 而现在，先来讲讲最后一步，在写完Vue和Koa2后，如何将它们部署到线上。 1.将Vue和Koa2结合 很多人在打完包后就不知道怎么做了，毕竟后面都是后端的事情。如果你用的是Vue-cli3.0，那么打包这一步会非常简单，只需要执行一条命令即可，其它的不用关心： npm run build 之后会生成一个dist的文件夹，将它放到Koa2目录下的public文件里，然后在Koa2的配置文件app.js里将静态资源指向这个文件夹
koa2最简单的部署vue cli打包的项目
qq_35428462的博客
01-29 1584
vue cli准备 在vue cli的图形界面（vue ui）打包好的项目，会生成一个dist目录，这就是打包好的你的vue单页面应用的静态文件。 koa2 准备 1.新建一个空文件夹，比如这里我新建了一个“koa2”的空文件夹，作为项目的根目录。 2.在当前目录的地址栏输入cmd，直接定位到当前目录打开cmd。 3. 产生一个package.json npm init 4.安装koa cnp...
Koa2框架快速入门与基本使用
终生学习，终生成长
06-03 6283
简单来讲，Koa2是一个基于nodejs的web server框架。 官方文档 Koa2框架使用入门 不使用脚手架，直接使用Koa框架： # 新建文件夹，控制台进入文件夹 npm init npm install koa 然后就可以新建js文件写Koa代码了。带有详细注释的示例代码如下。 const Koa = require('koa') const app = new Koa() // ctx: context, 上下文 app.use((ctx) => { ctx.body =
Koa中间件项目搭建，部署到linux服务器上
weixin_42165779的博客
02-22 1505
Koa中间件项目的搭建，编写，以及部署于linux服务器上。
前端项目打包并部署
热门推荐
喵酱
04-12 1万+
在当前项目路径下，执行命令在当前项目路径下，生成 一个dist文件夹。将来部署项目，是部署的dist这个文件。
springboot项目两种打包方式，部署，发布
酷酷的馫博客
05-12 1万+
1.打jar springboot打jar就比较简单，如果你们的是前后端分离的，而且要前端和后端不打一个包，有可能部署在两台不同的服务器上，你们首要就是解决跨域的问题，nginx是解决跨域问题的好帮手，你可以上网查一下怎么解决。 我的项目是前后端分离开发，但是最后要打成一个包，部署在一台服务器上，所以就不用考虑跨域问题，步骤如下： ①：拿到前端人员给你的dist包，把里面的内容放在你项目的status文件夹下 ②：别忘修改你，配置文件的数据库的连接，修改成你要部署的服务器的连接地址和你的pom文件 ③：
前端如何将项目打包部署到服务器
z020729的博客
08-19 1783
本篇文章从前端项目打包开始，逐步完成项目部署到服务器的操作，这次采取的部署方案是通过vscode中Remote-SSH和SFTP两个插件实现项目部署到服务器，并在服务器上通过nginx代理将请求转发到对应的端口。
Vue+Koa2 搭建前后端分离项目
Leo_DLi的博客
01-15 695
简单的一个 Demo 演示: Vue 和 Koa2 在本地搭建前后端分离项目.当前环境:1, Vite 搭建的 Vue 前端项目 ( 也就是 Vue 3 了 ) .2, Koa2 搭建的 后端项目.前端项目在 localhost: 5173 端口下运行, 后端项目在 localhost: 3000 端口下运行, 因此, 前端通过 Ajax 请求 后端的接口就会存在问题. 本文的终点也在聊如何实现跨域.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值