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 用记忆函数快速计算递归函数
Mar 15 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
Jquery插件easyUi表单验证提交(示例代码)
Dec 30 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
JS实现灯泡开关特效
Mar 30 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 开发环境配置(Zend Server安装)
2010/04/28 PHP
php下使用strpos需要注意 === 运算符
2010/07/17 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
php实现留言板功能
2017/03/05 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
Python执行时间的计算方法小结
2017/03/17 Python
pip命令无法使用的解决方法
2018/06/12 Python
对python:print打印时加u的含义详解
2018/12/15 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
python进阶之自定义可迭代的类
2019/08/20 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
大学生个人推荐信范文
2013/11/25 职场文书
公务员培训心得体会
2013/12/28 职场文书
个人自荐材料
2014/05/23 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
实习报告范文
2019/07/30 职场文书
7个关于Python的经典基础案例
2021/11/07 Python