vue项目打包后本地index运行

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

本文介绍如何在Vue CLI项目中，通过修改config/index.js和build/utils.js文件中的配置，解决项目打包后图标无法正常显示的问题。涉及路径设置及publicPath属性调整。

vue-cli项目打包后直接在本机运行，config/index.js 中修改代码

build: {

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    //加了一个小点
    assetsPublicPath: './',
  }

在这里插入图片描述
打包后图标不能用？
build / utils.js 中 return ExtractTextPlugin.extract 返回值中 添加 publicPath: '../../'
在这里插入图片描述

前端开发：Vue项目打包步骤
全沾软贱开发攻城狮
07-29 1万+
在前端开发过程中，开发项目编码是必须的能力，但是开发之后的上线也是不可缺少的技能。而且现在的前端开发用的打包都是借助于三方插件来完成的，本篇博文就来分享一下前端项目打包的流程步骤，本案例以Vue来介绍，其他前端技术的打包步骤这里不再过多介绍。 Vue项目打包一般是基于webpack+vue-cli下的操作，具体的操作命令也很简单，只需要在终端里面输入打包命令：npm run build 回车即可进行打包。但是需要注意一点，那就是需要完整的vue-cli项目，通过vue init webpack初始化的项目
vue编译打包本地查看index文件的方法
08-27
本文将详细介绍如何在Vue编译打包后，本地查看`index.html`文件，以及`/build/config/index.js`配置文件中的`assetsPublicPath`参数的作用。 首先，确保你已经安装并配置了Vue CLI（Vue.js的命令行工具）。如果你还...
vue项目打包步骤
热门推荐
从零出发
06-25 31万+
vue项目打包终端运行命令 npm run build打包成功的标志与项目的改变，如下图：点击index.html，通过浏览器运行，出现以下报错，如图：那么应该如下修改呢？具体步骤如下：1、查看package.js文件的scripts命令2、打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到in...
vue项目build 打包之后如何本地访问
qq_44776454的博客
06-18 1890
Vue项目构建后实现本地访问的方法
将 Vue 项目打包并集成到后端 JAR 包中的完整教程
最新发布
Rysxt_的博客
10-08 1505
步骤操作内容1配置 Vue 项目的，执行打包2将 Vue 打包后的dist内容（index.htmlstatic/）复制到 Spring Boot 的目录3（可选）如果使用 Vue Router history 模式，添加一个通配 Controller 将所有非 API 路径请求转发到index.html4打包 Spring Boot 项目为 JAR，运行测试。
vue打包后直接打开文件index.html
qingfeng2556的博客
08-01 1万+
vue打包，不用http server,本地运行，比如 file:///D:/desktop/dist/index.html 1、首先 https://blog.youkuaiyun.com/lhb_11/article/details/79455015 参考这个进行打包 2、对资源图片还有css的特殊处理 把资源文件拷贝处理，放到对应层次，这样就能正常访问 开发时注意事项，层次分明，结构以2层为...
vue打包后如何在本地运行？
先做到 再看见
08-01 863
本文介绍了Springboot+Vue项目打包部署的全流程：1）配置vue.config.js设置静态资源路径；2）创建VueRouter实例并配置hash模式路由；3）通过npm run build生成dist文件夹；4）后端配置静态资源处理器，指定static目录并设置访问权限；5）添加重定向控制器将根路径指向前端入口页面。最终实现本地运行打包后的Vue应用，通过访问根路径自动加载前端页面。
vue-cli打包后本地运行dist文件中的index.html操作
10-14
标题和描述中提到的核心知识点是如何使用Vue CLI打包后的项目在本地环境中运行。Vue CLI是Vue.js的官方命令行工具，它简化了Vue.js项目的创建和开发过程。打包是开发周期中的一个关键步骤，通常是将源代码转换为生产...
vue项目打包后打开页面空白解决办法
08-27
在Vue项目中，index.html文件是项目的入口文件，其通过script标签引入了打包后的JavaScript和CSS等资源。如果这些资源的路径配置不正确，浏览器将无法正确加载这些资源，从而导致页面显示空白。 为了避免路径错误的...
打包vue项目
weixin_46513664的博客
04-19 285
把router文件夹中的index.js中的history改为hash const router = new VueRouter({ mode: 'history',//改为hash base: process.env.BASE_URL, routes }) 把vue.config.js中的publicPath和assetsDir路径都改为“./” module.export...
Vue项目打包
sen_x
12-15 400
SpringBoot+VUE+Nginx 前后台分离WEB项目部署——Vue项目打包 VUE项目打包时需要进行以下router下index.js文件 和 config/index.js两个文件的修改。 （1）router下index.js文件修改 在router下添加如下配置 base: “/rdstd/”, //项目名称 访问路由页面都需要加上这个,访问的根路径为http://ip:por...
Vue项目如何打包
Z_B_L的博客
12-23 4646
需要注意的是，打包后的文件可能会比开发环境中的文件大很多，因为打包过程会将所有的依赖文件合并并进行压缩。在打包之前，你可以通过优化代码、按需加载等方式来减小打包后的文件大小，提高应用的加载速度和性能。你可以将这些文件上传到服务器的公共目录中，或者使用托管平台提供的部署功能。通过以上步骤，你就可以成功地将Vue项目打包成静态文件，并进行部署。3. 打包完成后，你会在项目根目录下生成一个名为dist的文件夹。这个命令会执行Vue CLI提供的打包脚本，将你的Vue项目打包成静态文件。
Vue项目打包部署
qq_40259528的博客
07-20 2万+
vue项目部署，使用的是linux centors nginx.遇见的问题及解决方案
Vue项目的打包部署
程小白的博客
08-19 3464
一.当前开发模式 前后端分离的开发模式 前端和后端开发人员开发好后，要将前端项目和后端项目分别打包部署在前端服务器和后端服务器上。而当前最为流行的前端服务器为nginx。 二.打包 这样就完成了打包，打包完成后只需要将dist下面的资源部署在服务器上。 打包后的文件 三.部署 官网上下载 下载稳定版。 解压安装在一个没有中文和空格的目录下。 安装完成后打开所在文件夹，其文件夹功能介绍如下： 我们的项目文件（dist中的文件，为静态资源）就要拷贝到html文
vue项目打包优化
qq_24418107的博客
09-23 1052
此外，更多代码的解析、编译也就意味着更多的硬件资源消耗，在低端设备上也会存在明显的性能问题。现实世界中，很多工程师可能是在遗留代码库上工作，并且遗留代码库存在的时间还很长，那么很可能这个代码库中存在大量的无用代码，但是谁也不敢删除他们，因为 JS 这门语言的动态性，你不能粗暴的把哪些看起来“没有被使用”的代码直接删掉，除非你很清楚所有的代码执行路径，很显然这对于大型应用或者遗留代码库来说是不现实的。最右边显示的是我们加载的css和js文件数量，红色区域表示已运行的代码，而青色表示已加载但未运行的代码。
vue项目打包流程
weixin_45645412的博客
01-09 1万+
vue项目打包流程 二、打包优化 1.首先在根目录下面创建一个vue.config.js文件 2.去除.map文件，在vue.config.js文件里面抛出一个对象，然后把下面两段代码写到对象里面，然后在控制台或者终端通过npm run build命令，打包项目 注：如果一次不行，就在执行一次 module.exports = {}//在vue.config.js文件里面抛出一个对象 publicPath: "./", productionSourceMap: false, //不输出map文件 3
Vue项目打包部署到服务器
qq_36158551的博客
12-11 5171
const {// 部署生产环境和开发环境下的URL。// 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
vue前端项目打包和部署
z_y_j229970438的博客
06-13 1814
1.在项目终端使用npm run build命令进行打包，打包完成后我们会在左边的项目文件夹中得到dist文件夹，找到这个文件夹的位置，后续我们会用到。在打包前要将node_modules文件夹删除，否则你打包后的dist文件会非常大。前端和后端开发人员开发好后，要将前端项目和后端项目分别打包部署在前端服务器和后端服务器上。点击保存后，在nginx文件夹里面通过cmd命令进入终端输入nginx -s reload命令。将打包的前端项目文件夹复制到nginx文件夹里面，复制dist文件夹的路径，后面会用到。
vue项目打包访问index.html页面出现空白
muzidigbig的博客
01-04 9754
错误现象： 1.主要的问题就是路径问题 因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。 只要修改config文件夹里的index.js里的assetsPublicPath的值； config/index.js assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级...
vue项目打包后html运行不出来
04-26
<think>嗯，用户的问题是关于Vue项目打包后HTML无法正常运行。我需要先回想一下常见的导致这个问题的原因。根据之前的引用内容，可能涉及到路由配置或者服务器设置的问题。比如，当使用history模式的路由时，如果没有正确的服务器配置，刷新页面可能会导致404错误。另外，打包后的静态资源路径不正确也是一个常见问题，比如dist文件夹中的index.html引用JS和CSS文件的路径不对。 首先，应该检查路由模式。Vue Router默认是hash模式，这种模式不会导致刷新问题，因为URL中的hash部分不会被发送到服务器。但如果用户切换到了history模式，就需要服务器配置来支持，确保所有路由请求都指向index.html。比如在Nginx中需要添加try_files指令，或者Apache中的重写规则。 然后，静态资源路径的问题。在vue.config.js中，publicPath的设置是否正确？如果项目部署在根目录，应该设置为'./'，这样资源会相对路径加载。如果设置成了绝对路径，比如'/dist/'，在本地直接打开index.html时可能无法加载资源，导致页面空白。 另外，检查生成的dist文件夹里的文件结构是否正确，是否有缺失的静态文件。有时候构建过程中可能出错，导致文件没生成完整，这时候需要重新安装依赖并构建。 还有跨域问题，如果后端接口有跨域限制，前端在本地运行时可能会遇到问题，不过这可能更多是在开发环境中的问题，但用户提到的是打包后的，所以可能不是主要因素。 用户可能是在本地直接打开index.html，而没有通过HTTP服务器运行，这也会导致路径问题，因为file协议和HTTP协议处理资源路径的方式不同。所以建议用户使用serve或者配置本地服务器来测试打包后的文件。 总结下来，解决方案应该包括以下几个步骤： 1. 检查并调整路由模式，必要时配置服务器。 2. 设置正确的publicPath。 3. 确保正确引用静态资源。 4. 检查服务器配置是否正确。 5. 处理可能的跨域问题。 6. 使用正确的协议测试打包文件。 同时，生成相关问题可以帮助用户进一步解决可能遇到的其他问题，比如页面空白、接口请求失败等。需要确保回答结构清晰，分步骤说明，让用户能一步步排查和解决问题。</think>针对Vue项目打包后HTML无法正常运行的问题，以下是分步解决方案： ### 一、路径配置问题 1. **修改`vue.config.js`配置** 在项目根目录新建/修改`vue.config.js`文件，设置正确的静态资源路径： ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/' } ``` 该配置确保打包后的资源使用相对路径引用（如`./js/app.js`）而非绝对路径（如`/js/app.js`）[^2] 2. **检查`index.html`资源引用** 打包后查看`dist/index.html`文件，确认`<script>`和`<link>`标签的src/href路径是否正确： ```html <!-- 正确示例 --> <script src=./js/chunk-vendors.123456.js></script> <!-- 错误示例 --> <script src=/js/chunk-vendors.123456.js></script> ``` ### 二、路由模式问题 1. **区分hash模式与history模式** - **hash模式**（默认）：URL带`#`符号，无需服务器配置 ```javascript const router = new VueRouter({ mode: 'hash' }) ``` - **history模式**：需服务器支持URL重定向 ```javascript const router = new VueRouter({ mode: 'history' }) ``` 2. **服务器配置示例** - **Nginx配置**： ```nginx location / { try_files $uri $uri/ /index.html; } ``` - **Apache配置**（.htaccess）： ```apache RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] ``` ### 三、本地验证流程 1. **安装本地服务器验证** ```bash npm install -g serve serve -s dist ``` 通过`http://localhost:3000`访问可排除纯静态文件访问问题[^1] 2. **直接打开`index.html`的限制** - 浏览器本地文件协议（`file://`）存在跨域限制 - AJAX请求、Web字体等可能被拦截 - 推荐始终通过HTTP服务器访问 ### 四、进阶排查 1. **检查控制台报错** - 404错误：资源路径配置错误 - CORS错误：后端接口未配置跨域 - SyntaxError：代码压缩导致兼容性问题 2. **白屏问题专项处理** ```javascript // 在main.js中添加错误捕获 Vue.config.errorHandler = (err) => { console.error('Vue Error:', err) } window.addEventListener('unhandledrejection', e => { console.error('Promise Error:', e.reason) }) ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值