要命系列-运行vue打包后的文件

如何运行打包后的dist文件看看效果,比如路径什么的有没有问题之类的,那就需要在部署前看看页面有没有崩坏。

废话不多说,看图(ps本人用的是vue-cli4)

首先npm install -g serve(全局安装),如果你网速不大好,用淘宝镜像cnpm安装也可以

再来就是在这一级目录下直接serve -s dist 就可以了

然后就可以了~

是不是觉得很简单很假,,其实这就是不啃vue文档的后果,度娘一搜前几页基本都是安装express-generator生成器什么的~太可怕了。。刚弄完vue还没松口气,还要弄其他的,简直是要我狗命,,

,先不说繁琐的操作后会不会出现新bug,就操作流程,一眼看过去就想点浏览器右上角的X。

吓得我赶紧看vue文档看看有木有更简单的解决方法,毕竟打包运行查看一系列操作都是必须的,应该有更官方的便捷解决方法,考虑到这里,就有了上面的解决方法

要命系列,早点下班~

原文地址:https://www.cnblogs.com/fbj-mqy/p/12254874.html

时间: 2024-10-06 18:42:24

要命系列-运行vue打包后的文件的相关文章

Vue打包后出现一些map文件

Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1,运行  cnpm run build  开始打包 2,会在项目目录下自动创建dist目录,打包好的文件都在其中 解决办法:     去src/config/index.js中改一个参数: productionSourceMap:false 把这个改为false.不然在最终打包的文件中会出现一些map文件,map文件的作用在于:项目打包后,代码

webpack打包后iconfont文件路径问题解决

在使用vue-cli创建vue项目时,可以自动生成webpack文件.使用 npm run build 即可打包发布生产文件,打包后的文件 可以看到使用url-loader处理后的文件是在static目录下生成fonts目录下的文件.全部样式文件打包在css目录下app.hash.css文件中. 但我们会发现发布后,会存在字体文件找不到的问题,查看css文件发现是iconfont字体文件的路径引用问题. 解决方法: 在build/utils文件中的下图所示位置添加../../公共路径 这样打包的

webpack4+(打包后的文件分析+HTML插件+样式处理)

(1)打包后的文件分析 首先将打包后的文件进行适当删减,Ctrl+Shift+L可以同时选中所有相同结构内容 结构如下 (function(modules){ ... })( { ... } ) 分析可知本质为匿名函数即IIFE函数,执行时会传入后面函数执行符里的对象,接下来分析下传入对象 key指的是当前模块路径 value (2)HTML插件 (3)样式处理 . 原文地址:https://www.cnblogs.com/jianxian/p/12416586.html

vue打包后.woff字体文件路径问题处理

在执行 npm run build 命令打包后,如果出现 .woff 等字体文件找不到的情况 通过设置 vue-style-loader 打包前缀路径解决 原文地址:https://www.cnblogs.com/fanlu/p/11002744.html

vue打包后出现"Failed to load resource: net::ERR_FILE_NOT_FOUND"错误

创建vue脚手架搭建项目之后,用npm run build经行打包,运行index.html后出现异常: 打开dist/index.html, 诸如这些的,引入是有问题的, 这边的全部是绝对路径,而本应该是相对路径. 解决办法: 打开config/index.js文件,将build->assetsPublicPath改为"./",即可,就是前面加个点. 原文地址:https://www.cnblogs.com/chenmz1995/p/9996760.html

Vue打包后访问静态资源路径问题

Vue介绍中static文件夹里放的是静态资源目录,如图片.字体等. 我们发现运行npm run start后本地图片路径是没问题的,但是打包上传后会怎么样呢? 我们知道,执行npm run build 后会生成dist文件夹,把里面的index.html在浏览器运行会发现 图片路径出错啦!!! 解决方法: 1.先找到config下的index.js文件 把最后的'/' 改为 './' 2.接着把图片地址改为 这样就解决啦~~ 原文地址:https://www.cnblogs.com/wangx

vue打包后index.html界面报错

vue项目完成后,打包放到服务器上,打开index.html页面时发现一片空白并且报错 很明显是js和css引用不到. 解决办法: 修改vue项目config文件夹下面的index.js,将assetsPublicPath:'/'改为assetsPublicPath:'./' 原文地址:https://www.cnblogs.com/luyuefeng/p/8350573.html

vue打包后出现静态资源|(图片,json数据)找不到路径

最近在学习Vue是如何编写项目的,在踩了许多坑后,终于要到了最后一步npm run build了,很开心的等待奇迹,然后打包后出现了找不到图片路径的问题. 解决办法:1.将图片或者json数据文件夹放到static的文件夹中,这样打包后webpack会自动打包 2.在build的文件夹下找到utils.js的文件,修改打包后静态资源的路径,添加 publicPath: '../../' 原文地址:https://www.cnblogs.com/klkitty/p/9099472.html

vue打包后,轮播图的动画内容位置显示不正确,且动画失效

解决方法: 1.在vue项目中找到build文件夹下的vue-loader.conf.js,将extract:isProduction  改为extract:false 此步骤打包后解决了动画图片位置错误的问题 2.package.json配置文件里面对浏览器的版本做了css的前缀处理 此步骤解决了动画失效问题 "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8