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 表单进行客户端验证demo
Aug 24 Javascript
javascript css styleFloat和cssFloat
Mar 15 Javascript
angularjs中的e2e测试实例
Dec 06 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 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 XPath对XML文件查找及修改实现代码
2011/07/27 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
提高网站信任度的技巧
2008/10/17 Javascript
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
Python库urllib与urllib2主要区别分析
2014/07/13 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
会计专业毕业生推荐信
2013/11/05 职场文书
企划专员岗位职责
2013/12/09 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
党员争先创优承诺书
2015/01/20 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
Python操作CSV格式文件的方法大全
2021/07/15 Python