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 模式设计之工厂模式学习心得
Apr 27 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
js实现文本框选中的方法
May 26 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 Javascript
vue+element实现打印页面功能
May 20 Javascript
swiper4实现移动端导航切换
Oct 16 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
文件上传的实现
2006/10/09 PHP
再次研究下cache_lite
2007/02/14 PHP
PHP 裁剪图片成固定大小代码方法
2009/09/09 PHP
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
PHP的基本常识小结
2013/07/05 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
分享20款好玩的jQuery游戏
2011/04/17 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
理解javascript中DOM事件
2015/12/25 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
Python 字典与字符串的互转实例
2017/01/13 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
办公室文秘岗位职责
2013/11/15 职场文书
写自荐信的注意事项
2014/03/09 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
2014企业年终工作总结
2014/12/23 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书