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 相关文章推荐
跨域表单提交状态的变相判断代码
Nov 12 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 06 Javascript
教你使用vscode 搭建react-native开发环境
Jul 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 获取可变函数参数的函数
2009/08/26 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
jQuery 动态酷效果实现总结
2009/12/27 Javascript
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
Javascript中神奇的this
2016/01/20 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
js闭包学习心得总结
2018/04/17 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
深入浅析Python字符编码
2015/11/12 Python
Python高级用法总结
2018/05/26 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
深入了解NumPy 高级索引
2020/07/24 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
卫生院健康教育实施方案
2014/06/07 职场文书
刑事和解协议书范本
2014/11/19 职场文书
预备党员入党感言
2015/08/01 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python