VUE打包本地运行

最新推荐文章于 2024-05-17 16:35:27 发布
最新推荐文章于 2024-05-17 16:35:27 发布
阅读量244 收藏
点赞数
分类专栏： 前端学习记录 文章标签： 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元/天 解锁文章
是小黄鸡不是小黄鸭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目本地打包运行
juejiangjianchi的博客
12-30 1516
目录一、项目运行需要依赖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 816
在本地启动Vue打包的方案有很多种。
Vue(二十三)Vue打包到本地运行
Good Luck
05-28 419
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 699
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-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项目本地打包测试，本地运行dist文件夹
团酱
05-17 1337
根目录下创建 .env.development .env.production .env.staging。
vue项目打包后如何在本地运行
weixin_48667689的博客
08-05 2137
vue项目打包后如何在本地运行
vue 打包后的如何在本地运行
IT_iosers的博客
12-01 730
思路:搭建express本地服务器 步骤一: 安装express-generator npm i express-generator -g 步骤二：创建本地服务器 在终端通过以下命令： express myExpressProject 步骤三:进入项目目录 cd myExpressProject 步骤四:安装相关项目依赖 注意: 通过终端进入myExpressProject文件,执行下列代码 npm i 步骤五:把打包后的dist文件夹下的所有文件复制到myExpressProject文件.
前端 Vue3导入本地pag格式文件 打包dist
weixin_48701221的博客
11-28 931
vue中导入本地pag文件
vue项目打包后在本地运行
墨灬笙的博客
08-24 5148
vue项目打包后在本地运行 首先运行命令npm run build。运行成功后vue项目中会生成一个dist文件夹。怎样将这个文件夹在本地运行呢？需要如下几个步骤： 1、cd 到dist文件夹中，运行http-server这个命令； 如果出现下面这个错误： 就找到C盘下C:\Windows\System32\WindowsPowerShell的powershell.exe这个文件并用管理员方式进行运行，点开后输入命令 set-ExecutionPolicy RemoteSigned, 之后在项目终端中运行n
vue 打包之后如何运行本地文件
wwf1225的博客
05-26 5270
vue 打包之后如何运行本地文件 1. 需要安装http-server 通过npm install -g http-server进行全局安装 2. 通过命令行进入到dist文件夹 运行http-server 3.在浏览器输入上述地址就可以访问了. 第二篇博客：https://blog.csdn.net/qq_22713201/article/details/95630246 ...
将vue项目打包成app、将vue项目上传到云服务器上
weixin_45184627的博客
06-10 616
cordova环境配置，将vue项目打包成app的详细流程： https://blog.csdn.net/qq_42720683/article/details/104006233 记录一下
打包vue项目，并利用webpack运行在本地
chuanqian9678的博客
07-02 253
打包后的项目生成的dist文件可以部署到 express 服务器上运行 1. 打包vue项目 （1）cd vue项目 （2）npm run bulid （3）打包完会生成dist文件夹。如图： （4）注意：如果此时打开dist下的index.html 页面将一片空白，并且报错 vue...
vue项目打包后如何本都部署访问
zy199701的博客
07-04 2647
2、输入 npm i express -s 是用于在 Node.js 项目中安装 Express 框架的命令。app.use(express.static(‘./dist’)) // dist 是项目的打包资源路径。3、.将项目打包好的dist文件放入其中以及新建一个app.js文件用于运行。缺点，输入其他路由报错，点击按钮可以跳转，不知道怎么解决，直接转入方式二。1、新建一个文件夹 进入目录后打开cmd 输入npm init -y。5、接着在cmd输入运行命令 node .\app.js。
【转】怎样运行 Vue 打包后的项目
qq_33422122的博客
03-01 4643
Vue build 后运行命令，无需放入tomcat根目录
webpack + vue 打包后本地运行网页空白
06-08
如果你使用 webpack + vue 打包后本地运行网页空白，可能是因为打包后的文件路径不正确，导致页面无法正确加载。 你可以尝试以下几个解决方案： 1. 检查打包后的文件路径是否正确，确保所有的文件都被正确地打包到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值