vue生成文件本地打开查看效果的实例


Posted in Javascript onSeptember 06, 2018

问题描述:

npm run build 后dist文件夹下面直接浏览器打开index.html,css和js的路径都不正确。 放到跟目录下就正常了。

问题解决:

打开项目所在文件夹里面的 config - index.js

vue生成文件本地打开查看效果的实例

在 build 部分的 assetsPublicPath 里面加一个点即可

assetsPublicPath: '/',

改为

assetsPublicPath: './',

解释:

将绝对路径改为相对路径(解释有点不对,凑合着理解吧)

延伸:

这么做的效果主要影响的是 项目所在文件夹里面的 build- webpack.base.conf.js

vue生成文件本地打开查看效果的实例

效果相当于:

output: {
 path: config.build.assetsRoot,
 filename: '[name].js',
 publicPath: process.env.NODE_ENV === 'production'
  ? config.build.assetsPublicPath
  : config.dev.assetsPublicPath
 },

改为了:

output: {
 path: config.build.assetsRoot,
 filename: '[name].js',
 publicPath: process.env.NODE_ENV === 'production'
  ? './'
  : config.dev.assetsPublicPath
 },

以上这篇vue生成文件本地打开查看效果的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
js的touch事件的实际引用
Oct 13 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
vue a标签点击实现赋值方式
Sep 07 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 #Javascript
在vue中读取本地Json文件的方法
Sep 06 #Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 #Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 #Javascript
vue template中slot-scope/scope的使用方法
Sep 06 #Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 #Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 #jQuery
You might like
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
WordPress中"无法将上传的文件移动至"错误的解决方法
2015/07/01 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
jQuery的一些注意
2006/12/06 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
讲解Python中if语句的嵌套用法
2015/05/14 Python
Python编码类型转换方法详解
2016/07/01 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
如何用Python绘制3D柱形图
2020/09/16 Python
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
C#笔试题集合
2013/06/21 面试题
区三好学生主要事迹
2014/01/30 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
个人更名证明
2015/06/23 职场文书
2019年思想汇报
2019/06/20 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript
讲解Python实例练习逆序输出字符串
2022/05/06 Python
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript