vue-cli 3.0打包之后可以本地访问index.html

最新推荐文章于 2025-09-26 16:26:11 发布
原创 最新推荐文章于 2025-09-26 16:26:11 发布 · 4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在Vue项目中通过vue.config.js文件设置publicPath为'./'，以实现资源的正确加载路径。

第一步:在package.json同一级下新建vue.config.js
在这里插入图片描述
第二步:设定publicPath:’./’
在这里插入图片描述
第三步: 可以直接打开index

vue-cli3多环境多入口，分别打包
weixin_43554698的博客
04-17 9067
最近公司需求，参考了很多资料，自己搭了一个小demo。 一、安装 1.Vue CLI 3需要 nodeJs ≥ 8.9 ，查看node版本升级，升级一下 2.查看版本vue -V，安装vue-cli3，npm install -g @vue/cli 二、使用 1.vue create projectname 搭建新项目：vue create vue-cli3 选择默认default(基本的 Ba...
Vue-CLI3.0更改打包配置
Riona_cheng的博客
09-20 3277
Vue-CLI3.0中的打包配置
vue cli3 build 打包后的的dist文件夹内的index.html如何本地正常打开
q759859479的博客
06-11 2463
一 vue.config.js配置里： module.exports = { publicPath: './', 加入这一行 ** } 官网原文： baseUrl 注意⚠️： 从 Vue CLI 3.3 起已弃用，请使用publicPath。 publicPath Type:string Default:'/' 部署应用包时的基本 URL。用法和 webpack 本身的output.publicPath一致，但是 Vue CL...
# vite + vue3 实现打包后 dist 文件夹可以直接打开 html 文件预览
最新发布
2501_92234528的博客
09-26 523
因为数据都塞这里面了，就不需要读取其他文件而产生错误了！写了点静态页面，需要给客户看页面效果，但是我打包之后将。不过说实在话，在实际开发，也很少设置绝对路径吧？调用其他文件出的问题嘛，那就把所有的。如果顺利的话，打包完成之后，就只有一个。为什么突然写这么一篇文章，首先，自己用。发送给客户后，客户没有通过nginx。构建插件，它的主要作用是将所有的。希望对大家有点用处！一半这种情况下，有两种解决方法，是可以直接在浏览器打开的哟！等三方服务部署，直接打开。这个插件是干嘛用的哈。资源直接内联到最终的。
vue-cli打包后本地运行dist文件中的index.html操作
hougenhong的博客
02-21 3539
注：node server运行后会在本地node服务占用一个端口，该端口是在127.0.01（即localhost上），而平时开发中我们启动的npm run dev端口是我们本地实际ip地址的服务。以上这篇vue-cli打包后本地运行dist文件中的index.html操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。到了这步如果还是没有显示出来，那是因为你的路由模式的关系，你把你的路由模式改成“hash”就行了。histroy(/)切换路由模式。hash(#)：默认路由模式。
Vue打包后如何在本地直接运行？
LoveZJC96的博客
05-30 2372
1.打包 npm run build 2. 解决方法 1.安装express-generator生成器 npm install express-generator -g 2.创建一个express项目 express 名称 3. 进入express项目并安装项目依赖 npm install 4.把dist目录下的所有文件复制到express项目的public文件夹下 5.启动express项目 npm start 6.打开浏览器，输入 http://loca.
vue-cli3 多入口,多环境打包
榴莲不好吃的专栏
06-09 4770
本篇文章讲解如何进行多入口打包以及多环境打包. 1.多入口打包 假设我们的项目,分为手机端商城和pc端后台管理,手机上是用户访问,pc上是自己的后台管理, 后台管理使用elementUI框架,H5不使用任何框架.打包的时候,pc和h5分开打包.本机运行的时候pc和h5也是分开的 2.多环境打包 一个项目想要正式上线,首先需要本地开发没问题后,发到测试线上给测试人员测试,测完没问题再发到预发布环境(类似正式环境)上,最后没问题了才发到正式线,这个过程中每个环境连的接口地址都不一样,这是肯定不能每打包一
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
10-17
在使用Vue CLI 3.0构建项目时，经常会遇到打包后文件体积过大的问题，尤其当构建一个单页应用(SPA)时，首屏加载速度成为影响用户体验的重要因素。首屏加载时间过长会直接导致用户感觉网页响应缓慢，从而降低用户满意...
vue cli 3.0通用打包配置代码,不分一二级目录
11-19
在这种情况下，Vue CLI 3.0 仍然提供了灵活性，可以通过 `configureWebpack` 选项来访问和定制原始的 Webpack 配置。比如，如果你想在开发过程中，使服务器能够从 `static` 目录下提供静态资源，可以这样做： ```...
使用Vue-cli3.0创建的项目 如何发布npm包
10-16
- **配置文件修改**：`vue.config.js`是Vue-cli 3.0提供给我们的一个配置文件，通过修改这个文件我们可以自定义打包行为。例如，如果项目需要支持服务器端渲染，我们可能需要启用`runtimeCompiler`选项。而`public...
关于vue-cli3打包代码后白屏的解决方案
01-19
最近使用了vue-cli3.0 开发了一个移动网页端项目，准备打包发布了。按照以往的流程 npm run build 问题来了 打开 dist index.html 文件发现白屏。打开调试后 发现文件引用路径不对 根据以往的经验 根目录下新建 vue....
解决Vue项目打包后dist中的index.html用浏览器直接打开显示空白页的问题
热门推荐
青春木鱼的博客
07-14 2万+
三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
VIte+Vue3 打包在FIle本地index.html打开项目（不需要起服务）
JSLang333的博客
02-21 1万+
VIte+Vue3 打包在FIle本地index.html打开项目（不需要起服务）
vue-cli3配置多页面入口
hellojoy的博客
05-19 4438
https://www.cnblogs.com/fqh123/p/11981646.html 假如要单独将登陆页面当成一个项目入口文件： 第一步：创建一个登陆页面的文件 　　在项目public文件夹下创建一个login.html，其实就是将index.html复制一份，将title改一下： 　　 第二步：在src文件夹下创建一个login文件夹，分别创建login.main.js、login.router.js、login.vue三个文件 　　 ...
vue3 vue cli3 项目打包成浏览器可以打开的html
prey1025的博客
03-30 1816
版权声明：本文为优快云博主「Ella Shen」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/syiting/article/details/108914719。+ 如果不配置一些，npm run build 出来的html游览器打开是空白的。//webpack-dev-server相关配置。open:true//配置游览器自动访问。2. router/index.js下。### 1、情况分析。
vue cli3 项目打包成浏览器可以打开的html
Ella的博客
10-03 1382
原因 如果不配置一些，npm run build 出来的html游览器打开是空白的。 在根目录下新建vue.config.js文件 module.exports = { //基本路径 publicPath:'./', //输出文件目录 outputDir:'dist', //webpack-dev-server相关配置 devServer:{ port:8011, host:'localhost', open:t
vue-cli3配置多页面
weixin_43837268的博客
10-26 243
module.exports = { // 我配置完成 和 文件夹 匹配好 // 相当于 写了两套项目 vue代码 // pages 配置 多页面入口 index 和ui // 配置和 你的文件夹匹配 两套 文件 pages: { index: { // page 的入口 entry: "src/views/index/main.js", // 模板来源 template: "public/index.html", .
Vue3全局脚本添加与使用方法
油墨香^-^的博客
05-31 1725
如何在Vue项目中引入全局脚本？本文介绍了3种方法：1）在index.html中通过<script>标签直接引入，适合第三方库；2）作为ES模块引入，符合模块化思想；3）封装为Vue插件，适合复杂全局功能。第一种最直接但易污染全局空间，第二种推荐用于新项目，第三种适合集成高级功能。可根据实际需求选择合适方案，其中ES模块方式最符合现代前端工程化理念。
vue-cli3.0 执行打包指令npm run build后如何本地直接访问index.html
sinat_40697723的博客
05-01 1万+
1：在最外层目录下创建一个vue.config.js文件； 2. 在vue.config.js中输入如下代码： module.exports = { publicPath: './' } 3. 保存后执行npm run build以后会出现一个dist目录，点击里面的index.html文件即可直接访问本次项目，而不需要执行npm run serve。 注意： 不配置vue.co...
Vue-cli3.0配置教程：详细解析vue.config.js
### Vue-cli 3.0 配置基础知识点 Vue-cli 3.0 是 Vue.js 官方提供的一个完整 Vue.js 开发工具链，它提供了一个快速构建项目的基础配置，极大地简化了项目的搭建和配置流程。接下来，我们将详细探讨在使用 vue-cli ...
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值