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 相关文章推荐
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
Javascript基础教程之argument 详解
Jan 18 Javascript
javascript数据类型示例分享
Jan 19 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
利用 JavaScript 实现并发控制的示例代码
Dec 31 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 中文乱码解决办法总结分析
2009/07/30 PHP
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
PHP常用的三种设计模式
2017/02/17 PHP
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
原生js滑动轮播封装
2020/07/31 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
详解Python的Django框架中的模版继承
2015/07/16 Python
python开发之str.format()用法实例分析
2016/02/22 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
浅谈Python中(&,|)和(and,or)之间的区别
2019/08/07 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
职业技术学校毕业生推荐信
2013/12/03 职场文书
班级安全教育实施方案
2014/02/23 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
校本研修个人总结
2015/02/28 职场文书
获奖感言一句话
2015/07/31 职场文书
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL