浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法


Posted in Javascript onFebruary 21, 2018

1.vue中的vue-cli打包

最近在用vue写一个小项目,其中就用到了vue脚手架工具vue-cli,在测试打包后能否运行过程中遇到不少问题,而且在网上这些问题答案都不太好找,废话不多说,进入正题。

a.执行打包命令:npm run build

b.打包之后生成的文件夹为根目录下的dist文件:

浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法 

c.进入dist中

浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法 

在运行这个index.html之前先说说一些打包配置问题:

在config文件夹下可以看到一个index.js文件,打开其中可以看到有几个属性分别是:

assetsRoot: path.resolve(__dirname, '../dist')//其实这个就是刚才打包后的根目录文件夹dist,所有的文件都会输出到这里

assetsSubDirectory: 'static' //默认是把css,fonts,images,js输出到这个文件夹下,但是我的改成了 assetsSubDirectory: '' 所以上图就直接输出到dist下了,即这个参数配置的是静态文件的输出目录

assetsPublicPath: '/' 这个就是静态文件的引用前缀

在index.html文件中可以看到每个js,css文件的引用路径,在服务器上运行时如果发生找不到文件如下图

浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法

大多数情况下都是参数配置问题,可以根据index.html文件下的路径进行测试进行解决,如果不行可以留言一起交流。

Javascript 相关文章推荐
js获取当前路径的简单示例代码
Jan 08 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
js实现简单的无缝轮播效果
Sep 05 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 #Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 #Javascript
Vue项目中设置背景图片方法
Feb 21 #Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 #Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 #Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 #jQuery
Angular实现的进度条功能示例
Feb 18 #Javascript
You might like
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
bpython 功能强大的Python shell
2016/02/16 Python
使用Python设计一个代码统计工具
2018/04/04 Python
使用Python更换外网IP的方法
2018/07/09 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
final, finally, finalize的区别
2012/03/01 面试题
财务部副经理岗位职责范本
2014/06/17 职场文书
培训科主任岗位职责
2014/08/08 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
运动会新闻报道稿
2015/07/22 职场文书
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL