博客内容

每一篇都是认真思考与总结的结晶


关于vue/cli3打包空白页问题解决

2020年09月05日   0 个评论   12 次访问   1 人点赞   夜光

在vue-cli2中也出现过打包后本地打开index.html空白页问题,解决办法:修改config文件夹中ndex.js文件中assetsPublicPath属性为assetsPublicPath:

前提

在vue-cli2中也出现过打包后本地打开index.html空白页问题,解决办法:修改config文件夹中ndex.js文件中assetsPublicPath属性为assetsPublicPath: ‘./’,路由用hash模式
在这里插入图片描述
在这里插入图片描述

环境

  • vue-cli3
  • package.json文件如下:
{
  "name": "my-temp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

vue-cli3解决办法

  • 新建vue.config.js文件,添加配置项:publicPath: ‘./’
module.exports = {
    publicPath: './',
}
  • 1
  • 2
  • 3

vue.config.js目录位置
vue.config.js目录位置

  • 路由用hash模式
    在这里插入图片描述

效果

在这里插入图片描述
官网对publicPath属性说明:

部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致,但是 Vue CLI 在一些其他地方也需要用到这个值,所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。
默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 publicPath 为 /my-app/。
这个值也可以被设置为空字符串 (’’) 或是相对路径 (’./’),这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径,也可以用在类似 Cordova hybrid 应用的文件系统中。

官网链接地址:publicPath描述

                                </div>

评论区



发表评论

昵称和评论内容是必填项,邮箱选填,用来交流信息

请输入评论

请输入昵称

显示评论区

  • sss  2020年09月23日 21:45:08

    输入一个评论测试一下功能

  • 。。  2020年03月30日 13:43:45

    666

  •  2020年03月30日 13:43:37

    666

  • 。。  2020年03月30日 13:42:02

    12345666

  • yubao99599  2020年03月27日 09:13:19

    非常棒



80

夜光网站

网站均来自自己课余时间所做,感谢来访

© 2019 夜光网. ALL RIGHTS RESERVED.
本站已运行 184天19小时59分19秒
THEME KRATOS MADE BY XIAOYOU MODIFIED BY XIAOYOU SITEMAP
赣ICP备19003009号