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控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
javascript实现Table排序的方法
May 15 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
node.js实现快速截图
Aug 27 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
angularJs提交文本框数据到后台的方法
Oct 08 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
Vue动态生成表格的行和列
Jul 18 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
PHP Ajax实现页面无刷新发表评论
2007/01/02 PHP
一个PHP数组应该有多大的分析
2009/07/30 PHP
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
为PHP初学者的8点有效建议
2010/11/20 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
js中eval详解
2012/03/30 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
vue实现分页栏效果
2019/06/28 Javascript
python打开文件并获取文件相关属性的方法
2015/04/23 Python
教大家使用Python SqlAlchemy
2016/02/12 Python
python 循环while和for in简单实例
2016/08/16 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
初三化学教学反思
2014/01/23 职场文书
中国梦口号
2014/06/13 职场文书
vue elementUI表格控制对应列
2022/04/13 Vue.js