文件资源路径是对的,但是页面空白。百度了很久找了一篇文章解决了。

1.vue项目中config文件下index.js中打包配置

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

// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/dist/',//history

2.路由配置:router文件夹下index.js
let router = new Router({
mode: 'history',//history
base: '/dist/',//history,
 router:[{...}]
})

原文: https://blog.csdn.net/mjlfto/article/details/80270620

学习笔记-vue 打包去#和页面空白问题的更多相关文章

  1. vue 打包后,页面空白及图片路径的问题

    打包之后打开dist的页面显示空白: 1.记得改一下config下面的index.js中bulid模块导出的路径. 这里需要将 assetsPublicPath: '/'改为assetsPublicP ...

  2. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  3. Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)

    五  Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...

  4. Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)

    Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)

  5. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  6. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  7. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  8. Java学习笔记四---打包成双击可运行的jar文件

    写笔记四前的脑回路是这样的: 前面的学习笔记二,提到3个环境变量,其中java_home好理解,就是jdk安装路径:classpath指向类文件的搜索路径:path指向可执行程序的搜索路径.这里的类文 ...

  9. vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失

    第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...

随机推荐

  1. Sketch & UI & PS

    Sketch & UI & PS app ui https://sketchapp.com/learn https://www.sketch.com/docs/ https://ske ...

  2. idle & js

    idle & js idle meaning in js https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensi ...

  3. JsBridge & Android WebView

    JsBridge & Android WebView webview loadUrl addJavascriptInterface .setJavaScriptEnabled(true); f ...

  4. Dart 中断Future

    更多 中断future 方法1) import 'package:async/async.dart'; void main() { var get = CancelableOperation.from ...

  5. 远程过程调用框架——gRPC

    gRPC是一款基于http协议的远程过程调用(RPC)框架.出自google.这个框架可以用来相对简单的完成如跨进程service这样的需求开发. 资料参考: https://blog.csdn.ne ...

  6. C++算法代码——阿克曼函数

    题目来自: 题目描述 阿克曼( Ackmann) 函数 A(x, y) 中, x, y 定义域是非负整数, 函数值定义为: 输入 输入两个数,表示m和n. 两个数均不超过10. 输出 输出一个数,表示 ...

  7. [报错集]ubuntu中安装oracle java报错

    1.因为版本更新,JAVA15以前的版本都已经没办法下载了,所以要使用oracle java必须使用最近的java15 $ sudo apt-get install oracle-java15-ins ...

  8. HTTPS:网络安全攻坚战

    本文为<三万长文50+趣图带你领悟web编程的内功心法>第五个章节. 5.HTTPS 我们知道,明文传输和不安全是HTTP的其中一个特点,但是随着越来越多机密的业务交易转移到线上,如银行转 ...

  9. Asp.NET Core 限流控制-AspNetCoreRateLimit

    起因: 近期项目中,提供了一些调用频率较高的api接口,需要保障服务器的稳定运行:需要对提供的接口进行限流控制.避免因客户端频繁的请求导致服务器的压力. 一.AspNetCoreRateLimit 介 ...

  10. HDOJ-1257(贪心/动态规划)

    最少拦截系统 HDOJ-1257 我做这题的思路就是采用暴力或者贪心.也就是每次循环选出从第一个未被选择的元素开始,依次把后面可以选择的元素作为一个系统.最后统计可以有多少个系统. 还有人的思路就是利 ...