vue打包到node,本地运行

最新推荐文章于 2024-05-23 14:46:37 发布
转载 最新推荐文章于 2024-05-23 14:46:37 发布 · 608 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://segmentfault.com/a/1190000011584395
文章标签：

#javascript #ViewUI

本文介绍两种Vue项目的部署方式：一是将构建后的dist文件夹内容整合到Node.js项目中，并通过Express静态文件托管；二是直接在原有项目结构内进行部署。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

情况一

复制文件夹里面的内容出来

不复制安装包，安装包后面再安装

vue

npm run build

生成dist文件夹
clipboard.png
把dist文件夹放到node文件夹目录中

clipboard.png

node

注意代码的位置，不能放在后面
clipboard.png

加入下面代码，让express，走dist中的index

app.use(express.static(path.join(__dirname,'dist')));

情况二

直接在原本的文件夹进行

Vue项目打包后的dist文件夹如何本地预览？Node服务+局域网访问全攻略 vue项目打包预览、静态服务、express部署、局域网访问、node本地服务、vue打包dist目录预览
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
07-19 60
作为前端开发工程师，我经常遇到这样的问题：“Vue 项目打包完之后，怎么在本地像线上一样预览效果？很多小伙伴直接打开，结果发现页面白屏、路由失效、样式乱掉，这其实是因为 Vue 项目打包后依赖的是服务环境，而不是简单的打开 HTML 文件。今天我就手把手教你，如何用启动一个静态服务来预览打包后的dist目录，并且支持手机等设备通过局域网访问调试。Vue 项目打包后，不是直接打开就能用的，而是需要运行一个真正的服务环境。通过简单的，我们就能轻松实现本地和局域网的静态部署预览。用。
Node.js-利用webpack使传统html项目在node服务器运行并打包的小玩意
08-09
利用webpack使传统html项目在node服务器运行并打包的小玩意
vue脚手架打包后，直接启动nodejs服务部署静态文件
weixin_43660626的博客
07-31 1205
1、根路径下新建build.js（注意安装必要的npm包） const { run } = require('runjs') const chalk = require('chalk') const path = require('path'); const rawArgv = process.argv.slice(2) const args = rawArgv.join(' ') if (process.env.npm_config_preview || rawArgv.includes('--previ
vue-cli打包过程及打包后与node交互实现
shuhaha的博客
10-17 2798
个人博客网站实现过程如下： 完成静态页面的布局。通过vue-cli框架连接数据库，完成后台搭建采用vue-resource做交互 本地运行没有任何问题。 运行方法是：先启动数据库，然后启动后台node index，然后再npm run dev启动项目。 项目目录如下：--build --config --node_modules --server --acti
将 Vue 打包生成的 dist 文件运行在你的服务器上（最全教程）
浮小夏的博客
09-02 8072
将 Vue 打包生成的 dist 文件运行在你的服务器上（最全教程） 你可能需要用到的工具：PuTTY、FileZilla 1 在服务器（CentOS）上安装 Node 参考文章：https://zhuanlan.zhihu.com/p/126704711 1️⃣在服务器上找好（创建） Node 的安装位置，例如： /usr/local/temp 2️⃣在 Node 中文网下载 Node 安装压缩包 3️⃣在第 1 步的安装位置处下载 Node 安装压缩包 wget https://npm.t
vue打包运行在nodejs上面
qq_43505774的博客
05-11 1232
以老版的脚手架为例（新版虽然已经出来了，但是官网文档还未出来） npm run build 会生成dist目录里面有static文件夹与index.html文件 在config的index.js文件里面 build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'),//模块HTML的名字 // Paths assetsRoot: path.resolve(_
vue-cli打包后本地运行dist文件中的index.html操作
10-14
标题和描述中提到的核心知识点是如何使用Vue CLI打包后的项目在本地环境中运行。Vue CLI是Vue.js的官方命令行工具，它简化了Vue.js项目...通过理解和掌握这些知识点，可以更好地处理Vue项目打包和本地运行的常见问题。
vue打包本地启动方案
qq_28875189的博客
05-23 1365
在本地启动Vue打包的方案有很多种。
VUE打包的项目在本地运行
Even_ycp的博客
01-15 3950
这个是基于nodeJs搭建的一个简易的服务器。 项目结构也很简单，代码就几句。关键是不用在vue.config.js里面配置打包的路径。我自己用的挺好。就记录下来，以防丢失！ 我把我的打包好dist文件夹的文件结构也发一下 dist是vue打包好的文件夹。要用的话就创建一个文件夹，初始化，我把package.json、package-lock.json的代码贴出来。你们复制到你们的json文件...
vue项目本地打包运行
juejiangjianchi的博客
12-30 1633
目录一、项目运行需要依赖node.js环境二、安装cnpm三、安装vue-cli脚手架构建工具 需求：从git上拉下来一个前端vue代码，此时直接打开index.html是没有办法访问页面的，就像一个Java spring项目，直接运行main方法是不可能访问内部的接口的，必须要把项目运行起来才能使用，所以现在的问题就是如何运行起来这个vue项目。 一、项目运行需要依赖node.js环境 问题来了，vue和node有什么关系，为什么需要依赖nodejs呢。 官网给出的解释是：vue本身不依赖nodejs，
vue后台管理系统打包上线到node
m0_51328823的博客
02-17 1145
项目准备 1. 配置 alias 别名 使用vue-cli开发项目，最大特色是组件化。组件中频繁引用其他组件或插件。我们可以把一些常用的路径定义成简短的名字。方便开发中使用。 //加载path模块 const path = require('path') //定义resolve方法，把相对路径转换成绝对路径 const resolve = dir => path.join(__dirname, dir) module.exports = { chainWebpack: config =&gt
如何把vue中打包好的项目放入node中执行
zhixuexingchen的博客
04-01 1754
如何把vue中打包好的项目放入node中执行 首先新建一个文件夹，名字随便取 然后npm i初始化这个项目 新建app.js文件 在app.js文件中复制如下代码 var connectHistoryApiFallback = require('connect-history-api-fallback') var express = require('express') var app = r...
Nodejs -- Nodejs Express搭建 + vue搭建打包 + 将vue打包后的文件放到express项目中运行
Emily
06-21 7637
一. Nodejs Express搭建 后面都称为“express项目” 1. 全局安装（-g）express-generator npm install express-generator -g 2. 项目初始化(这里把项目名设置为server) express -e server 如上，根据提示输入相应命令： cd server //进入项目目录下 npm...
关于vue执行打包后，如何在本地浏览问题
weixin_30817749的博客
01-23 986
最近一个人在捣鼓vue，写完项目后发现在npm run dev下可以正常访问，bulid之后却一片空白，查看console出现许多Failed to load resource: net::ERR_FILE_NOT_FOUND。恩，看了下网上评论找到了正确的方法 webpack.prod.conf.js 中output添加参数publicPath:'./' 这样在项目下直接打开index.ht...
vue系列之项目打包
02-22 533
vue完成项目后，如何打包成静态文件，并且用Node调试 打包 1、修改config里面的index.js里面的productionSourceMap为false,默认情况是true（true代表打包环境是开发环境，可以进行调试；false表示生产环境，正式上线的） 2.在cmd里面运行npm run build,(运行的是build里面的build.js文件) 生成的包放在di...
node 本地部署vue项目
Lee的博客
06-28 3152
以express为例： var createError = require('http-errors'); var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan'); var h...
如何在 Node 中实现服务器重定向
走在秃头的路上的博客
02-14 1219
header(‘location’) 301 永久重定向 浏览器会记住 a.com b.com a 浏览器不会请求 a 了 直接去跳到 b 了 302 临时重定向 浏览器不记忆 a.com b.com a.com 还会请求 a a 告诉浏览器你往 b ...
【Vue】基于nodejs的vue项目打包编译部署
而浮生若梦，为欢几何
12-06 1万+
一·项目编译 1·进入项目目录下的终端执行命令 npm run build 正常情况如下图，如遇到错误不会编译成功，且编译后的html文件不能正常渲染。   2·编译完成后进入项目下的dist目录运行生成的index.html文件 打开以后f12出现以下错误（资源文件未找到） 打开项目中的index.js文件修改build 里的assetsPublicPath属性为空即可
本地运行vue dist文件
热门推荐
韩大璐
08-08 1万+
vue打包命令 npm run build 运行这个命令会在目录中生成一个dist文件夹 在服务器部署vue项目只需要把这个文件夹给后台就可以了 但是打包之后我们需要在本地先自测一下，下面就是踩过的一些坑： 静态资源路径问题——空白页面 解决方法： 打开脚手架的config文件中的index.js文件， 把build对象内的assetsPublicPath(发布路径)改为"./"。 默认的情况下是...
vue项目打包后放到docker运行
最新发布
12-31
为了将 Vue 项目打包并运行于 Docker 中，需先确保本地环境已安装 Docker。接着，在项目根目录下创建 `Dockerfile` 文件用于定义镜像构建指令。 #### 创建 Dockerfile 编写一个简单的 `Dockerfile` 来指定基础镜像...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值