VUE打包本地运行

最新推荐文章于 2024-06-18 12:15:22 发布
最新推荐文章于 2024-06-18 12:15:22 发布
阅读量249 收藏
点赞数
分类专栏： 前端学习记录 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41004986/article/details/105597453
版权
本文介绍了两种在本地运行Vue打包项目的办法。方式一通过安装http-server全局并使用它启动服务，或者利用VSCode的go alive插件。方式二则涉及修改Vue配置，包括将assetsPublicPath改为'./'，不配置mode为'history'，并在utils.js中增加publicPath以防找不到加载的CSS。
摘要由CSDN通过智能技术生成

VUE打包本地运行

方式一

step1:
安装 http-server
npm install http-server -g

step2:
包目录下运行
http-server

或者 使用vscode :go alive插件

方式二

step1:
修改config/index.js
把assetsPublicPath: '/'改成assetsPublicPath: ‘./’,dist文件夹里的文件必须放在服务器的根目录

step2:
修改router/index.js
不要配置mode: “history”

step3:
修改build/utils.js
增加 publicPath: ‘…/…/’。这个是由于assetsPublicPath变成了相对路径，找不到load的css了。如果没有使用特殊的css可以不用添加此处。

 // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
最低0.47元/天 解锁文章
是小黄鸡不是小黄鸭
关注
专栏目录
vue项目本地打包运行
juejiangjianchi的博客
12-30 1533
目录一、项目运行需要依赖node.js环境二、安装cnpm三、安装vue-cli脚手架构建工具 需求：从git上拉下来一个前端vue代码，此时直接打开index.html是没有办法访问页面的，就像一个Java spring项目，直接运行main方法是不可能访问内部的接口的，必须要把项目运行起来才能使用，所以现在的问题就是如何运行起来这个vue项目。 一、项目运行需要依赖node.js环境 问题来了，vue和node有什么关系，为什么需要依赖nodejs呢。 官网给出的解释是：vue本身不依赖nodejs，
vue打包本地启动方案
qq_28875189的博客
05-23 864
在本地启动Vue打包的方案有很多种。
vue项目打包后在本地运行
墨灬笙的博客
08-24 5160
vue项目打包后在本地运行 首先运行命令npm run build。运行成功后vue项目中会生成一个dist文件夹。怎样将这个文件夹在本地运行呢？需要如下几个步骤： 1、cd 到dist文件夹中，运行http-server这个命令； 如果出现下面这个错误： 就找到C盘下C:\Windows\System32\WindowsPowerShell的powershell.exe这个文件并用管理员方式进行运行，点开后输入命令 set-ExecutionPolicy RemoteSigned, 之后在项目终端中运行n
vue项目本地打包测试，本地运行dist文件夹
团酱
05-17 1382
根目录下创建 .env.development .env.production .env.staging。
VUE项目打包 本地运行方法
Geek-Haoyu
08-31 6145
VUE项目打包完成后 我们通常需要在本地进行测试 然后再放到服务器上 第一步：打包项目 npm run build 第二步：根目录新建 app.js文件 第三步：复制以下代码到app.js var express = require('express'); var fs = require('fs'); var http = require('http'); var app = expr...
vue-cli打包后本地运行dist文件中的index.html操作
10-14
标题和描述中提到的核心知识点是如何使用Vue CLI打包后的项目在本地环境中运行。Vue CLI是Vue.js的官方命令行工具，它简化了Vue.js项目...通过理解和掌握这些知识点，可以更好地处理Vue项目打包和本地运行的常见问题。
vue编译打包本地查看index文件的方法
08-27
在Vue.js开发过程中，我们经常需要将项目编译打包，以便于部署到生产环境或者预览本地构建结果。本文将详细介绍如何在Vue编译打包后，本地查看`index.html`文件，以及`/build/config/index.js`配置文件中的`...
Vue 打包的静态文件不能直接运行的原因及解决办法
01-22
吾辈使用 vue-cli 直接生成的 vue 模板项目，在模板之上继续开发的。然而在使用 npm run build 打包项目时，却发现打包好的项目在浏览器中直接打开好像什么都没有？ 原因 查看了一下打包后的 index.html 源码，终于...
vue项目打包后如何在本地运行
weixin_48667689的博客
08-05 2151
vue项目打包后如何在本地运行
Vue(二十三)Vue打包到本地运行
Good Luck
05-28 420
1.修改vue.config.js文件 修改前内容： const {defineConfig} = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false, }) 修改后内容： // eslint-disable-next-line no-unused-vars const webpack = require("web.
本地运行vue打包项目
YHJ
06-13 702
1. 使用 http-server-spa 全局安装http-server-spa yarn global add http-server-spa // 或者 npm i -g http-server-spa 运行 // http-server-spa <directory> <fallback> <port> // 运行 dist 为目录，index.html 启动文件，端口 8080 http-server-spa ./dist/ index.html 8.
vue项目打包后本地运行方法
zjltci的博客
04-20 7806
搭建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项目打包之后怎么在本地运行
热门推荐
萧萧的博客
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...
vue3项目打包后，将dist文件在本地运行
weixin_66582617的博客
03-05 1692
vue3项目开发好后，打包完成，想在本地运行测试打包文件可以通过http-server来启动。2、打包完成后，进入dist打包文件。4、启动dist文件，并指定端口。3、安装http-server。
vue项目build 打包之后如何本地访问
最新发布
qq_44776454的博客
06-18 1035
Vue项目构建后实现本地访问的方法
Vue项目打包以及本地服务器创建并部署项目
Alin_Wu_的博客
04-15 889
此时直接访问 localhost:5005 就可以看见用vue写的页面了（默认访问的是index.html）如果不显示页面，ctrl+c停止服务器并重新启动就可以了。在与server.js同级下创建一个static文件夹(一般是用static命名)，将打包好的dist下的文件复制到static文件夹下，修改server.js代码如下。路由的工作模式是hash，各种乱点再刷新是没问题的。1.用正则匹配判断哪些是前端路由，哪些是后端路由（没了解，不太懂）2.用npm的一个中间件。
【转】怎样运行 Vue 打包后的项目
qq_33422122的博客
03-01 4652
Vue build 后运行命令，无需放入tomcat根目录
webpack + vue 打包后本地运行网页空白
06-08
如果你使用 webpack + vue 打包后本地运行网页空白，可能是因为打包后的文件路径不正确，导致页面无法正确加载。 你可以尝试以下几个解决方案： 1. 检查打包后的文件路径是否正确，确保所有的文件都被正确地打包到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值