vue项目build后本地运行调试

最新推荐文章于 2024-06-18 12:15:22 发布

偷懒的付程序猿

最新推荐文章于 2024-06-18 12:15:22 发布

阅读量1k

点赞数

分类专栏： vue express 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_34656296/article/details/125978299

版权

vue 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

express

2 篇文章 0 订阅

订阅专栏

确保node已经安装

node -v

确保express安装

sudo npm install express-generator -g 
express test(这是项目名)
cd test
npm install
/* 将Vue build后生成的dist文件夹下的所有文件复制到express项目的publick文件夹下面 */ 
npm start

localhost:3000 调试

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

偷懒的付程序猿

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue项目build后本地运行调试

在vue项目打包后如何测试打包文件内容
复制链接

扫一扫

专栏目录

vue项目在移动端本地运行及本地调试

xpursue的博客

02-02

1697

手机端本地运行 1、确保手机和电脑连接同一个wifi 2、查询电脑的IP地址（WIN+R ，命令：ipconfig 找到IPv4地址） 3、修改vue项目config下index.js的host内容替换为第二步查找的IP地址 4.重新运行项目，百度'草料二维码'，利用草料二维码将运行地址生成二维码，微信扫一扫即可。手机端调试找到vue项目下index.html，将下面代码贴上去，点击右下角齿轮即可调试 <scripttype="text/javascript"src=...

vue简单方法打包运行命令npm run build？

weixin_46409887的博客

01-11

2957

参与评论您还未登录，请先登录后发表或查看评论

vue项目build 打包之后如何本地访问

最新发布

qq_44776454的博客

06-18

634

Vue项目构建后实现本地访问的方法

Vue项目打包，部署服务器，静态资源访问404问题。

猫

02-18

8008

Vue ^2.5.2 Webpack ^3.12.0 项目问题： vue项目本地运行正常，npm run build之后，将dist文件上传至服务器之后，访问域名出现 .js 、.css等静态资源文件访问404，导致访问页面空白。解决方法：找到这个文件然后作如下修改将 ' / ' 改成 ' ./ ' 然后重新打包部署，访问就ok了 ...

vscode调试 vue等前端源码调试

中老年程序员

01-30

2005

假设你已经有一份vue3源码，并且依赖安装完毕。如果没有安装pnpm 请自行搜索全局安装pnpm，然后vue3的项目中安装依赖是 pnpm install。2、在打开的调试侧边栏中点击属性设置按钮，如下图所示的顺序2，这时会弹出launch.json配置文件。1、直接在vscode中点击最左侧的调试按钮一般有个小虫子形状。4、最后点击调试侧边栏上方的调试启动箭头，会以调试方式启动项目。3、在配置文件里修改你想要启动项目的地址，如下图顺序3。

Vue项目build打包、express部署以及问题解决

dongshuaiqi的博客

08-17

1948

Vue项目build打包、express部署以及问题解决。

vue项目打包后在本地运行

墨灬笙的博客

08-24

5058

vue项目打包后在本地运行首先运行命令npm run build。运行成功后vue项目中会生成一个dist文件夹。怎样将这个文件夹在本地运行呢？需要如下几个步骤： 1、cd 到dist文件夹中，运行http-server这个命令；如果出现下面这个错误：就找到C盘下C:\Windows\System32\WindowsPowerShell的powershell.exe这个文件并用管理员方式进行运行，点开后输入命令 set-ExecutionPolicy RemoteSigned, 之后在项目终端中运行n

Vue-cli打包后如何本地查看的操作

10-14

Vue CLI 是一个由 Vue.js 团队开发的命令行工具，用于快速搭建 Vue.js 应用的脚手架。...通过遵循上述步骤，开发者可以在本地环境中轻松预览和调试打包后的 Vue.js 应用，确保其在实际部署前的正常运行。

Vue DevTools调试工具的使用

11-27

检查Vue项目的版本是否与Vue DevTools兼容，以及项目是否正常启动并运行在正确的端口上。 7. **下载修正版**： - 如果你不想手动修正Vue DevTools，可以下载已经修正好的版本，例如文中的`vueDevTools(可监测修正...

Android启动http运行vue程序.rar

12-24

然而，这个描述提到了"部署在Android本地"，这可能意味着使用了一个本地HTTP服务器来运行Vue打包后的静态资源。这通常涉及以下步骤： 1. **构建Vue应用**：在Vue项目中，开发者使用`npm run build`命令将Vue应用...

完美解决通过IP地址访问VUE项目的问题

10-15

在开发Vue项目时，我们通常使用`localhost`或者`127.0.0.1`来运行项目，但这只允许我们在本地环境进行测试。如果需要让其他设备（如手机或另一台电脑）访问我们的Vue应用，我们就需要通过IP地址来访问。本文将详细...

Vue安装Vue Devtools调试工具提示 Error: Cannot find module ‘@vue-devtools/build-tools’ 解决办法

01-08

我看网络上面安装Vue Devtools 调试工具的步骤几乎都是按照文章链接里的步骤进行安装：安装链接详情但是在最终执行编译命令的时候：npm run build ，提示如下错误：尝试了很多方法，都不能解决改问题。为了能够在谷歌浏览器上安装vue调试工具，通过下面步骤最终把Vue的调试工具安装成功。步骤一：访问该地址：vue调试工具插件，下载vue调试工具插件。直接点击推荐下载，相关文件就会下载下来。步骤二：将下载的文件进行解压，解压完之后，文件内容如下：打开谷歌浏览器，点击右上角 ==》选择更多工具按

vue移动端项目打包成app

01-08

这几天我做了一个vue移动端的小项目就想着打包成 app安装在手机上看看我就讲解下整个思路和过程 ...运行命令行 npm run build 项目文件夹下生成一个 dist文件夹下面有这些文件然后打开index.html 本地

Vue基础之指令与过滤器

fanlingfang的博客

11-06

624

ES6模块化 ES6模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需再额外学习AMD、CMD或CommonJS等模块化规范。 ES6模块化规范中定义: 每个js文件都是一个独立的模块导入其它模块成员使用import 关键字向外共享模块成员使用export关键字 p230 Promise async/await EventLoop 宏任务和微任务 API接口案例前端工程化实际的前端开发: 模块化(js的模块化、css的模块化、资源的模

Vue本地调试API跨域解决方案（axios请求）

逸风知霜

06-10

1844

第一步在站点根目录下新建vue.config.js(注：针对最新版Vue) 第二步打开路径src-->main.js文件，增加以下代码第三部请求写法如下以上可以解决axios请求API本地调试跨域问题

vue项目之配置本地，测试，生产环境，配置axios.defaults.baseURL，解决跨域问题

weixin_51225684的博客

09-01

1451

分别在dev.env.js,test.env.js,prod.env.js中定义变量API_ROOT，将webpack.prod.conf.js的内容复制到webpack.test.conf.js文件里。三、在build文件夹下建立test.js、webpack.test.conf.js文件。将build.js的内容全部制到test.js文件里，test.js完成。将prod.env.js内容全部复制到test.env.js文件里，然后修改webpack.test.conf.js文件；...

Vue代码中如何开启调试模式

chenludaniel的专栏

10-08

3774

vue 调试

Vue生产环境调试的方法

xuhss_com的博客

04-17

2991

Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 vue 生产环境默认是无法启用vue devtools的，如果生产应用出了问题，就很难解决。用本文提供的方法就可以实现线上debug vue，也不需要在浏览器上打断点。原理先说下vue如何判断dev

前端：解决vue2.0只能运行在Local，不能运行在NetWork的问题

Lyang666的博客

04-19

3870

1：设置localhost和本地ip访问，在config文件夹下的index.js文件中dev节点下的host修改为0.0.0.0 module.exports = { dev: { host: '0.0.0.0' } } 2：设置终端启动的localhost和network访问地址，修改build文件夹下的webpack.dev.conf.js文件中messages节点数组 compilationSuccessInfo: { messages: [

vue打包后如何试运行

09-01

在使用Vue.js开发完成后，我们需要将代码进行打包，以便在生产环境中部署和运行。首先，我们需要使用Vue CLI来创建一个项目。在项目的根目录下，可以运行`npm run build`命令来进行打包。这个命令会根据配置文件将所有的Vue组件、样式文件、图片等资源进行压缩和合并，最终生成一个或多个静态文件。一般情况下，打包后的文件会存放在一个名为`dist`的文件夹中。接下来，我们可以简单地通过打开`index.html`文件来试运行打包后的Vue项目。找到`dist`文件夹中的`index.html`文件，使用浏览器打开它即可。然而，由于Vue项目使用了一些前端开发的高级特性（例如路由、异步加载等），直接打开`index.html`文件可能会导致某些功能无法正常运行。这时，我们可以使用一个简单的HTTP服务器来模拟生产环境并运行Vue项目。我们可以使用诸如`http-server`、`live-server`等工具来快速搭建一个本地服务器。这些工具可以帮助我们在本地使用HTTP协议运行项目，以便测试和调试。在项目的根目录下，通过命令行运行`http-server dist`命令即可启动一个本地服务器，并将`dist`文件夹作为服务器的根目录。在浏览器中输入`http://localhost:8080`即可访问项目。总结起来，Vue项目打包后可以通过直接打开`index.html`文件来试运行，但建议使用一个本地服务器来模拟生产环境并运行项目，以便更好地测试和调试。