vue项目打包经验

[Element自带的图标不显示]打开 build/utils.js 文件,在如下位置添加 publicPath: '../../' [ElementUI的el-main组件默认会有padding=20px,若添加class也设置padding却无法覆盖]main.js中的引入顺序决定了打包后css的顺序,组件内的样式没有生效可能是被第三方组件样式覆盖了,所以把第三方组件放在前面引入,router放在后面引入,就可以实现组件样式在第三方样式之后渲染.…

【转】vue项目打包部署——nginx代理访问

我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要修改如下配置文件: 配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了…

vue项目打包采坑

1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包完部署到nginx上才会报的,在本地环境可以正常运行,真坑: 网上的资料说的报错原因是export和import不兼容啥的,经过我实际测试修改,问题出在使用export导出方法的js中,import了里面包含module.exports的js,这是两种不同的表达式,作用相同,但不能一起存在:网上的方…

Vue项目打包后背景图片路径错误

vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改默认配置: env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', 修改为: env…

vue项目打包后运行报错400如何解决

昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with a status of 400 (Bad Request) 网上搜索一圈,牛头不对马嘴的居多,向一前辈请教后,问题迎刃而解,现将方法分享如下: 其实超级简单!超级简单!超级简单!重要是事情说三遍,只需----------> 找到node_modules/@vue/cli-service/lib/op…

vue项目打包，生成dist文件夹，如何修改文件夹的名字

vue项目打包之后的dist文件目录是如下如果想要修改dist或则static文件名称,需要打开config / index.js build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', // 对应的…

vue项目打包踩坑记

基于webpack+vue-cli下的vue项目打包命令是 npm run build ,等待打包完成后在根目录生成dist文件夹,里面包含了所有项目相关的内容. 注意:需要完整版的vue-cli项目,即通过vue init webpack初始化的项目才可以,通过vue init webpack-simple初始化的项目没有打包文件,无法打包.目录结构如下 vue init webpack初始化的目录结构,打包依赖build和config文件夹的配置,static存放静态文件 vue init…

vue项目打包-2-九五小庞

vue项目打包一.终端运行命令 npm run build 二.打包成功的标志与项目的改变,如下图: 3.点击index.html,通过浏览器运行,出现以下报错,如图: 四.那么应该如何修改呢?具体步骤如下:1.查看package.js文件的scripts命令2.打开webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl点击,跳转到index.js文件3.其中dev是开发环境,build是构建版本,找到buil…

vue项目打包成html，在本地点击直接能打开

默认情况下vue项目打包后,本地打开index.html是空白的,有报错.Failed to load resource: net::ERR_FILE_NOT_FOUND 这时需要修改config->index.js 这时再打包,页面能看到了,但是好多引用的文件路径不对. 然后再修改build->utils.js ,加上publicPath:'../../' 再打包,就好了…

vue项目实战经验汇总

目录 1.vue框架使用注意事项和经验 1.1 解决Vue动态路由参数变化,页面数据不更新 1.2 vue组件里定时器销毁问题 1.3 vue实现按需加载组件的两种方式 1.4 组件之间,父子组件之间的通信方案 1.5 vue中 $event 的用法--获取当前父元素,子元素,兄弟元素 1.6 vue常用工具函数总结 1.7 axios二次封装http请求 2.elementui组件修改经验总结 2.1 element-ui 中步骤条的深度使用 2.2 v-loading框中的提示文字换行 2.…

cordova+vue 项目打包成Android（apk）应用

现在使用vue开发的项目越来越多,使用vue开发的移动端打包就成了最大的问题.现在前端打包方案有好多种,但是综合来说,我比较喜欢用cordova来进行Android和ios的打包,配置完成之后,每次只需要一条命令就可以完成打包. 1.安装cordova这一步的前提是已经完成安装node和npm,如果没有安装的话,请先完成node和npm的安装.node安装:直接进入官网https://nodejs.org/zh-cn/,下载最新版本安装.安装之后在命令行中使用"node -v" 检查安…

vue项目打包问题

使用vue-cli脚手架构建vue项目 vue init webpack project npm run build 打包时出现 Tip: built files are meant to be served over an HTTP server.Opening index.html over file:// won't work. 这段话的意思就是说:构建文件务必放在一个HTTP服务器.直接打开index.html文件将不工作. npm run dev是开发环境, npm run build…

vue项目打包部署上线

1. npm run dev:本地开发的时候做调试用的. 2. npm run build:打包部署上线,生成一个 dist 文件夹. 注意:用 npm run build 时,常遇到因引用路径不对导致页面无法正常显示的情况. 如果 vue 项目的代码上传到网站的根目录下一般是不会有问题的,也不会存在资源文件引用错误的情况,但如果 dist 文件夹没有放在网站服务器的根目录下,那么代码上传以后程序会报错. 解决办法:在 webpack 的配置文件中修改: assetsPublicPath:'./…

vue项目打包后一片空白及资源引入的路径报错解决办法

网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白.这个主要原因是路径的问题. 1.记得改一下config下面的index.js中bulid模块导出的路径.因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的.先看一下默认的路径. assetsPublicPath默认的是 ‘/’ 也就是根目录.而我们的index.html和static在同一级目录下面. 所以要改为 ‘./ ’. 当资…

Vue项目打包常见问题整理

Vue 项目在开发时运行正常,打包发布后却出现各种报错,这里整理一下遇到的问题,以备忘. 1.js 路径问题脚手架默认打包的路径为绝对路径,改为相对路径.修改 config/index.js 中 build 节点下 assetsPublicPath,把原来 ‘/’ 改为 ‘./’ build: { assetsPublicPath: './' } 2.img 路径问题在 build/utils.js 文件中 ExtractTextPlugin extract 节点下,添加一行:publicP…

通过cordova将vue项目打包为webapp

准备工作:需要之前配置好vue-cli脚架构,安装好cordova环境.下面开始对vue.js项目进行打包,打包环境为Android. 可以看下我的github:https://github.com/padipata ,里面有我自己写的vue项目,喜欢的给个关注呗. 1.添加cordova项目 $ cordova create myApp1 org.apache.cordova.myApp myApp2 其中: myApp1:cordova目录名 org.apache.cordova.myAp…

vue-cli构建的vue项目打包后css引入的背景图路径不对的问题

使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的,可使用npm run build命令打包后,访问dist目录下的项目,页面背景图路径就不对了解决方法:只需要在build/utils.js文件中添加如下一行代码即可. publicPath:'../../' 如下图: 这样就解决这个问题.…

vue项目打包之后首页白屏的问题

本地的vue项目在server端浏览没问题,但是执行npm run build 打包之后在本地预览是白屏. 解决方法 1.路径问题在config文件夹中找到index.js打开把assetsPublicPath: '/'改成assetsPublicPath: './' 2.路由问题 router.js中注释 // mode: 'history', // 默认hash src里边router/index.js路由配置里边默认模式是hash,如果是history模式,打开会出现空白页.所以mod…

Vue项目打包部署到apache服务器

vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进行打包,打包后会在项目目录下生成一个dist文件夹,内容如下: 然后就是把这些文件丢到服务器上的某个文件夹下,我这里的文件夹名字是ibms 遇到的问题: 1. 直接去访问http://www.xxx.com/ibms/,会发现网页是白屏的,什么都没有,这就比较奇怪了,其实是因为资源加载的路径有问题!…