关于vue打包后如何运行

最新推荐文章于 2024-08-23 16:57:19 发布
最新推荐文章于 2024-08-23 16:57:19 发布
阅读量7.8k 收藏 5
点赞数
分类专栏： vue
博客就当自己记的笔记而已~非常感谢博客大神的帮助，若有无意侵权，请联系我，谢谢
本文链接：https://blog.csdn.net/qq_32963841/article/details/79036321
版权

1.首页安装nginx-v1.13.8   安装包私信我要吧~~

 

 先解压到一个盘里 


2.用记事本打开，修改端口号，我这边修改的是5200

3.启动这个nginx.exe  

 双击后  会有一个命令行窗口一闪而过 
4.然后访问 http://localhost:5200，你会看到这个页面
5.然后将刚刚打包好的dist文件（就是你npm run build打包后生成的文件夹），丢入刚刚的html文件夹里面， 把原来里面这个的给删了，刷新即可看到效果哦


小仙女de成长
关注
专栏目录
使用webpack打包后的vue项目如何正确运行（express）
10-17
主要介绍了使用webpack打包后的vue项目如何正确运行（express） ,接下来通过本文给大家详细介绍，需要的朋友可以参考下
如何修改Vue打包后文件的接口地址配置的方法
10-15
为了方便管理和维护，本文介绍了如何修改Vue打包后文件的接口地址配置。 在常规的Vue项目中，我们可以简单地通过修改配置文件来改变接口地址。具体操作是在项目的config文件夹下找到dev.env.js（开发环境配置）和...
vue文件打包后怎么运行
最新发布
m0_74358570的博客
08-23 263
vue打包、vue打包后在本地运行
vue3 快速入门 (七) : Vue打包并部署到Nginx服务器上
朱豪凯的博客
08-11 1307
介绍vue3中怎么打包，并部署到Nginx服务器上
【转】怎样运行 Vue 打包后的项目
qq_33422122的博客
03-01 4652
Vue build 后运行命令，无需放入tomcat根目录
vue项目打包后如何在本地运行
weixin_48667689的博客
08-05 2151
vue项目打包后如何在本地运行
Vue如何运行打包后的项目
博客简介
02-16 1228
Vue打包后的项目如何运行预览
修改Vue打包后的默认文件名操作
10-14
本文将详细介绍如何修改Vue打包后的默认文件名，以避免这种冲突。 ### 一、问题背景 当你有多个Vue项目需要部署在同一服务器的不同路径下时，如果每个项目都默认输出到`dist`目录，那么就会产生文件路径的重叠，...
vue打包后显示空白正确处理方法
08-28
以下是一些解决 Vue 打包后显示空白页的常见方法： 1. **检查配置文件**： - 在 Vue 项目中，配置文件通常为 `vue.config.js`。我们需要确保这个文件存在，并且配置正确。如果你的项目没有这个文件，可以创建一个...
解决Vue打包后访问图片/图标不显示的问题
10-16
总结一下，解决Vue打包后图片和图标不显示的问题主要涉及两个步骤：一是检查并修正CSS中引用资源的路径，二是通过配置`publicPath`让Vue CLI在打包时自动处理资源路径。完成这两个步骤后，你应该能够成功地在生产...
Vue项目build打包后如何运行
宁坡浪子的博客
10-31 9144
npm run build命令进行打包后的程序如何在本地运行 1.全局安装express-generator生成器。 npm install express-generator -g 2.创建一个express项目。 express 项目名 3.进入项目目录，安装相关项目依赖。 cd 项目名 npm install//或cnpm install 4.将Vue build后生成的dist文件夹下的所有文件复制到express项目的publick文件夹下面，然后运行npm start...
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
12-12
亲测，webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行。 我的vue项目结构如下： 1. 进入该vue项目目录，打开git bash，执行：npm run build(在package.json的scripts配置) 执行成功如下图所示： 然后此时你会发现项目下多了一个 dist 文件夹，dist下文件便是项目打包之后生成的文件。 此时我们直接在浏览器中打开index.html，是会报错的，什么都看不到。 2. 安装express-generator生成器 执行  $ npm install express-generator -g
Vue 项目打包 部署 运行
ideal-lingyun
03-21 363
Vue 项目打包 部署 运行
如何运行vue打包之后的dist文件
CLOUDS06的博客
03-29 8287
介绍一种使用Node.js中的http-server模块搭建本地服务器的方法：1.确认已经安装了Node.js；2.安装http-server模块；3.进入到dist目录；4.启动http-server；5.输入网址，访问项目文件。
打包vue项目后部署运行
TOP的博客
01-18 860
打包vue项目后部署运行 npm run build 或 yarn build 打包以后会生成一个dist文件夹 安装express-generator生成器 npm install express-generator -g 创建一个express项目 express Demo （Demo是项目名） 进入Demo目录，安装项目依赖 cd Demo npm install 把dist目录下的所有文件复制到express项目的public文件夹下 然后运行 $ npm start 启动Demo
vue项目打包之后怎么在本地运行
热门推荐
萧萧的博客
07-12 1万+
vue项目打包后的文件需要在本地运行，这里介绍两种方法 （一）搭建express本地服务器 1、安装express-generator npm i express-generator -g 2、创建一个express项目 express my-express-project 3、进入项目目录 cd my-express-project 这时候能看到my-express...
Vue项目打包后如何在本地运行
舌尖上的蛋炒饭的博客
08-19 1737
Vue项目打包后如何在本地运行+We’re sorry but new doesn’t work properly without JavaScript enabled. Please enable Vue打包之后如果在服务器上运行的话我们是需要tomcat的，但是如果我们在自己本地运行，那就需要借助serve来实现 安装 npm install -g serve 启动 serve -s dist -p 3000 推荐使用nohup命令保持启动，即使命令行关闭，服务的运行也不会受到影响 nohup s
vue项目打包后本地运行方法
zjltci的博客
04-20 7804
搭建express本地服务器 1.安装express-generator （cmd全局安装） npm i express-generator -g 2.cmd打开要创建项目的文件夹，跑下面的代码，创建一个express项目 express my-express-project 注：my-express-project 是项目名称，可随意自取，只要运行下面命令时保持统一即可。 3.进入项目目录 cd my-express-project 这时my...
vue打包后怎么运行
11-03
使用Vue进行开发的项目，一般需要将其打包成最终可执行的静态文件，然后运行在服务器或者本地环境中。下面是一个简要的步骤来说明如何运行打包后的Vue项目： 1. 运行打包命令： 使用命令行工具进入项目根目录，并执行打包命令。常用的打包命令有： ``` npm run build ``` 或者 ``` yarn build ``` 这将根据项目中的配置文件（如webpack配置文件）将Vue项目打包成最终的静态文件。 2. 查看打包结果： 打包完成后，会在项目根目录生成一个`dist`（或者根据配置文件中的输出路径而定）文件夹，其中包含了所有打包的静态文件。可以使用文件管理器查看该文件夹中的内容。 3. 将打包结果部署到服务器或者本地环境： 将打包后的静态文件部署到服务器上或者在本地环境中打开。方法有很多种，以下列举常见方式： - 在服务器上部署： 将打包后的静态文件上传到服务器的指定目录中。通过配置服务器软件（如Nginx、Apache等），使得该目录能够被访问到。然后在浏览器中输入服务器地址和文件路径，即可访问到Vue项目。 - 在本地环境中打开： 可以使用任意一个本地服务器软件（如http-server、live-server等），将打包后的静态文件作为服务器的根目录，然后在浏览器中输入本地服务器的地址即可访问到Vue项目。 4. 运行Vue项目： 在浏览器中输入服务器地址（或者本地服务器地址），即可访问到Vue项目的打包结果。可以进行交互、浏览和测试等操作。 总结来说，将Vue项目打包后，需要将静态文件部署到服务器或者本地服务器环境中，通过访问服务器地址即可运行打包后的Vue项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值