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 form表单提交插件asp.net后台中文解码
Jun 12 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
Javascript文本框脚本实现方法解析
Oct 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 JSON格式数据交互实例代码详解
2011/01/13 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
教你php如何实现验证码
2016/01/20 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
js静态作用域的功能。
2006/12/25 Javascript
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
javascript版2048小游戏
2015/03/18 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
详解Python当中的字符串和编码
2015/04/25 Python
python类和继承用法实例
2015/07/07 Python
python函数的5种参数详解
2017/02/24 Python
python中kmeans聚类实现代码
2018/02/23 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
本科生求职简历的自我评价
2013/10/21 职场文书
好家长事迹材料
2014/01/23 职场文书
公证委托书大全
2014/04/04 职场文书
2014年法务工作总结
2014/12/11 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python
基于Python实现对比Exce的工具
2022/04/07 Python