vue 项目打包dist目录下index.html打开空白解决办法

最新推荐文章于 2024-08-22 17:58:57 发布
最新推荐文章于 2024-08-22 17:58:57 发布
阅读量7.9k 收藏 2
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33350717/article/details/84584698
版权

config 文件下面的index.js

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    <!-->这里写./<-->
    assetsPublicPath: './',
    ```
前端小泰迪
关注
专栏目录
vuecli3直接在本地打开dist文件中的index.html出现白屏的问题
六六的小帅的博客
07-14 1562
这个问题在vuecli官方文档中有提及 主要看背景为黄色的部分，意思就是一般情况下是不能在本地访问的，要通过http服务器才可以。 首先应该把生成的dist文件夹单独拿出来，然后在文件所在的路径操作命令 第一步：现在dist文件目录下输入 npm install -g serve 第二步：再输入serve 第三步：会出现可以访问的网址，直接在浏览器中输入就可以直接...
解决vue 项目使用webpack打包后，直接打开dist文件夹下的index.html页面空白的问题
sinat_41501316的博客
07-09 5546
问题描述 vue项目完成后，输入npm run build命令，会生成dist文件，本地打开dist/index.html，一般页面为空，或者报错找不到css和js文件，则需要更改一些路径参数，改成相对当前目录，然后再次运行npm run build 就可以在本地打开index.html。 解决办法 修改1：将config/index.js文件的assetsPublicPath: ‘/’; 改为assetsPublicPath: ‘./’; 修改2：将build/webpack.base.confg..
vue 中 dist文件夹静态是什么意思（distribution）
最新发布
chaoren499的专栏
08-22 469
在Vue项目中，将源代码经过编译、压缩等处理后打包为dist目录，是为了方便将项目部署到生产环境中。总之，将Vue项目打包为dist目录是为了优化静态资源文件、提高网页加载速度，并方便部署到生产环境中。dist目录的命名方式可以根据项目需要自行定义，通常是为了表达该目录所包含的是已经经过处理的最终版本的文件。具体来说，dist目录包含了经过压缩、优化、合并等处理后的HTML、CSS、JavaScript等静态资源文件。方便部署：将整个dist目录复制到服务器上，即可直接访问网站，方便部署和发布。
vue配置编译本地打开dist/index.html文件
fengsunest的博客
01-14 1407
 1.修改config/index.js文件的assetsPublicPath: '/';===》assetsPublicPath: './'; 2.build/webpack.base.confg.js文件的 publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config....
VUE项目打包，问题及解决
ItsWalter的博客
01-03 1589
在基本的java web工程中，WebContent目录存放了前端显示所需资源。所以VUE项目打包之后的内容也是放置在此处。 作为开发者，使用npm run dev来运行VUE项目，如果是用于打包，则使用npm run build来生成目标资源。 VUE项目中的config/index.js中包含了dev和build对应的参数。 npm run build将会在VUE根目录下生成dist目录，里面...
前端项目打包详细
小伙伴们全都Lucky！
08-24 1万+
项目打包命令为：npm run build 打包后会文件夹中自动生成一个dist文件 这个文件就是最终上传服务器的文件（或者将这个dist给后端） dist中的index打开是本地看不见什么的。如果想查看项目 ---- 1.在config目录中找到index。js build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths as...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
01-19
Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。 问题一：我在打包完成后，...
vue-cli打包后本地运行dist文件中的index.html操作
10-14
对于Vue CLI 3，则需要在项目的根目录下创建一个vue.config.js文件，并设置publicPath和assetsDir等选项，以及通过修改路由模式来解决可能的问题。Vue中常用的路由模式包括hash和history模式，对于本地环境的配置，...
vue项目打包后打开页面空白解决办法
08-27
Vue 项目打包后打开页面空白解决办法 在 Vue 项目开发中，经常会遇到打包后打开页面为空白的情况，本文将详细介绍解决这种问题的方法。 一、路径问题 在 Vue 项目中，index.html 文件中的内容都是通过 script ...
webpack打包配置自己的文件目录
weixin_34185512的博客
05-13 4059
1，build/index.jsbuild: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), //构建输出目录 也就是...
Vue项目用build打包，dist打开页面空白+Css样式混乱的坑，解决方法
baluo8339的博客
07-02 1620
前言： 在Vue项目开发中，或多或少都踩过build 打包的坑，这里针对build打包后，需要查看dist页面出现空白，和后续css样式出现混乱的最快解决方法！！ 正文： 　　　项目完成后，开始打包，不多说，直接 npm run build 命令，回车。 　　　（注：前提是你需要安装 node.js环境,否则无法运行，不懂自行Google。） 　　 在 build 打包...
vue 项目打包部署
实习打字猿的博客
04-18 235
# 建议先走vue优化三步曲 vue 首屏优化加载（一）（懒加载） vue 首屏优化加载（二）（Gzip压缩） vue 首屏优化加载（三）（CND引用） # 找到根目录下 config 文件夹下的 index.js 把 assetsPublicPath: '/' 修改成 assetsPublicPath: './' build: { // Template for index....
vue-cli的webpack模板项目配置文件分析
热门推荐
hongchh的博客
02-14 7万+
由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西，开发过程中需要改动到build和config里面一些相关的配置，所以刚好趁此机会将所有配置文件看一遍，理一理思路，也便于以后修改配置的时候不会“太折腾”。一、文件结构本文主要分析开发（dev）和构建（build）两个过程涉及到的文件，故下面文件结构仅列出相应的内容。├─build │ ├─build.js │ ├─ch
vue项目 build之后资源文件找不到问题
我不是郑正好啊
05-04 7288
解决静态资源失效的问题这就需要修改我们的 config 中的 index.js了，默认的build 中的部分是这样的： build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__d...
vue-cli打包之后的dist文件无法运行index.html
za_az的博客
03-29 5815
vue版本 "vue": "^2.5.2","webpack": "^3.6.0", 问题 打包之后的 dist 文件下面包含 static 文件和 index.html 文件，直接打开index.html文件为空白，控制台会有很多错误 解决方法 build/util.js if (options.extract) { return ExtractTextP...
解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
weixin_56035334的博客
07-11 7731
1.github是不是不能部署带有接口项目的前台电商项目啊 是不是得买服务器才能在线看啊 静态的我会部署，但是这个电商项目带了接口，我想应该不可以就这样放上去的 2.用npm run bulid打包后的index是不是不能直接打开。我百度了方法，都是让我改路径，但是他们都用webpack打包的，我这个是用npm init初始化的，并没有webpack下面的路径，所以我也改不了 3.那要怎么把这个前台项目部署到服务器上呢，是不是只能买个服务器来部署呀！！我主要想实现在线预览，给别人也可以看到做过的项目，
vue项目打包之后打开dist/index.html一片空白
05-23
打包后的 index.html 文件中的路径可能需要手动修改，以便正确地引用打包后的 JavaScript 文件等资源。例如，如果你将打包后的 JavaScript 文件放在了一个名为 `assets` 的文件夹中，那么你需要将 index.html 文件中...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值