vue-cli2 打包
npm run build 打包安装 相当于静态资源
解决vue-cli项目打包出现空白页和路径错误的问题
路径错误的问题解决方式:
打开config文件夹下的 index.js 找到如下图所示区域:
将build中 assetsPublicPath: '/', 改为 assetsPublicPath: './',
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
devtool: '#source-map',
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}
页面空白的问题解决如下:
router-view中的内容显示不出来。路由history模式。
这个坑是当你使用了路由之后,在没有后端配合的情况下就手贱打开路由history模式的时候,打包出来的文件也会是一片空白的情况,
很多人踩这个坑的时候花了很多时间,网上的教程基本上都是说的第一个坑,这个坑很少有人提起。

这里并不是不能打开这个模式,这个模式需要后端设置的配合,详情可以看:路由文档
内容有了可是本地图片显示错误:
由此可见导致问题的原因仍然是路径问题,解决方法如下:
打开 build 文件夹下的 utils.js 文件,找到以下部分加入publicPath:'../../',即可。如下显示
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath:'../../',
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
vue-cli2 打包的更多相关文章
- vue/cli2.0优化
vue/cli2.0 脚手架 在项目写完了之后, 运行npm run build --report可以看出这个项目的资源占比情况.可以看出整个项目哪一个资源在整个项目占比最大.它会自动打开一个可视化的 ...
- vue webpack打包后 iconfont引入路径不对
vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...
- 【转】vue项目打包部署——nginx代理访问
我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...
- vue build打包后css里的图片路径404不正确的问题
vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...
- vue项目打包后文本溢出代码消失问题
补充 https://www.cnblogs.com/richard1015/p/8526988.html vue webpack 打包编译-webkit-box-orient: vertical 后 ...
- vue+ elementUI 打包发布到服务器后,element-icons.woff文件404
vue项目打包部署到服务器,静态资源文件404 js文件404问题 原因:打包的项目静态资源的路径需要设置为绝对路径.如果是相对路径会出错 解决办法:修改config/index.js文 ...
- 自定义Vue组件打包、发布到npm以及使用
本文将帮助:将自己写的Vue组件打包到npm进行代码托管,以及正常发布之后如何使用自己的组件. 本文讲述的仅仅是最基础的实现,其他复杂的操作需要非常熟悉webpack的相关知识,作者将继续学习. 先附 ...
- vue项目打包采坑
1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...
- Vue项目打包后背景图片路径错误
vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...
- Vue build打包之后,刷新页面出现404解决方案
Vue build打包之后,刷新页面出现404,HTML5 History 模式 原因分析: vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于 ...
随机推荐
- 通过yum在centos安装mysql并配置远程登录
前言 前天按照Oracle上的文档装了一遍mysql,选了最新8.0的版本,后来出现一些问题,网上搜答案,出来的基本还是5.x版本的解决方案,并不适用8.0版本.然后我就去看了一下公司的正式环境买的阿 ...
- java类生命周期,类的“加载,连接,初始化,使用,卸载过程”详解
“ 如果说核心类库的 API 比做数学公式的话,那么 Java 虚拟机的知识就好比公式的推导过程” 每本Java入门书籍在介绍Java这门语言的时候都会提到Java跨平台,“一次解释,到处运行的特点“ ...
- node 连接 mysql 数据库三种方法------笔记
一.mysql库 文档:https://github.com/mysqljs/mysql mysql有三种创建连接方式 1.createConnection 使用时需要对连接的创建.断开进行管理 2. ...
- d03
回顾: 两个环境 工具环境:Jmeter的下载.启动.基本使用 项目环境:学生信息管理系统 两种接口: 天气预报:4个接口----GET方法 学生信息管理系统: 被测软件的学院信息接口: 4类: 查询 ...
- PostgreSQL 12 YUM安装
目录 1.创建postgres用户 2.查看操作系统版本 3.配置yum源(对应CentOS 6) 4.安装客户端包 5.安装服务器端包 6.初始化数据库和设置自启动服务 7.postgres用户的b ...
- Django JsonResponse 不自动设置 cookie 的解决方案
[背景] 目前在做一个前后端分离的 web 项目,后端使用的是 django 框架,所有的 API 都只返回 json :就在这个过程中遇到了一个问题,那就是对于所有的 JsonResponse dj ...
- WPF的DataGrid的某个列绑定数据的三种方法(Binding、Converter、DataTrigger)
最近在使用WPF的时候,遇到某个列的值需要根据内容不同进行转换显示的需求.尝试了一下,大概有三种方式可以实现: 1.传统的Binding方法,后台构造好数据,绑定就行. 2.转换器方法(Convert ...
- 故事2:.net程序员成长经历
啊,最近一段时间在学习asp.net mvc ,一直没有接着写了,加上白天工作很忙,每天都很辛苦的哈,那咱接着说上一个故事哈. 当时第二天开始复习java面试题,非常的期待,从来没有去过公司,不知道别 ...
- 在python中实现随机选择
想从一个序列中随机抽取若干元素,或者想生成几个随机数. random 模块有大量的函数用来产生随机数和随机选择元素.比如,要想从一个序列中随机的抽取一个元素,可以使用random.choice() : ...
- Spring源码解析系列汇总
相信我,你会收藏这篇文章的 本篇文章是这段时间撸出来的Spring源码解析系列文章的汇总,总共包含以下专题.喜欢的同学可以收藏起来以备不时之需 SpringIOC源码解析(上) 本篇文章搭建了IOC源 ...