Vue项目本地run与build后样式不同，build后样式不生效

【Vue项目本地run与build后样式不同，build后样式不生效】的更多相关文章

Vue项目本地run与build后样式不同，build后样式不生效

今天老大,让我改一个按钮的样式,就是鼠标放在按钮上,改变字体的颜色.觉得小意思啦,不就是:hover吗? 啊...什么鬼?本地run可以,但是build之后并没有生效!!! 我们项目引入的第三方UI库是IView,不管我是在当前组件中修改部分样式,还是修改UI库的css样式,在npm run dev的时候,修改之后的样式是会按照代码来显示的:可是npm run build的时候,修改的样式居然还是不起效果. 百度一下,才发现其实主要是我们将路由(router)先引入,导致自己修改的UI样式不起…

vue项目npm run dev 报错error in ./src/main.js Module build failed: Error: Cannot find module 'babel-plugin-syntax-jsx'

问题: vue 项目npm run dev运行时报错,如下图: 原因: 缺少相应的组件解决办法: 安装相应组件: npm install babel-plugin-syntax-jsx --save-dev 安装完成再次执行npm run dev…

vue项目npm run dev 报错error in ./src/main.js Module build failed: ReferenceError: Unknown plugin "transform-vue-jsx" specified in......

问题: vue项目npm run dev运行时报错,如下图: 原因: 缺少组件解决办法: 安装相应的组件: npm install babel-plugin-transform-vue-jsx --save-dev 然后再次运行:npm run dev…

在vue项目npm run build后，index.html中引入css和js 报MIME type问题

问题: 1.在vue项目中,build打包后,index页面打开会报错, MIME type ('text/html') ;报错内容:because its MIME type ('text/html') is not a supported stylesheet MIME type2.控制台报错:报错内容:http://127.0.0.1:5500/static/css/app.04f46711e76646577281177c721d6432.css 这个地址Cannot GET 解决思路:…

linux vue项目+npm run build + nginx

系统环境 vue nginx 步骤 1.打包vue项目 2.配置nginx 打包vue项目 1.项目配置我们使用服务器的8000端口 2.打包 # npm run build 打包成功会创建dist目录 3.上传到服务器配置nginx 1.进入nginx 2.复制默认的配置文件default.conf -> fengtaoconf # cp default.conf fengtao.conf # vim fengtao.conf 修改端口和路径 3.有的服务器还需控制台…

VUE项目 npm run build卡住不动，也不报错

npm config set registry http://registry.cnpmjs.org try again npm run build 居然能动了....…

vue项目npm run dev 报错Uncaught SyntaxError: Unexpected token <

目前代码所处位置是micro分支,该分支是从dev分支直接拉下来进行npm run dev的,而dev分支是可以正常运行的,网上的诸多解释是babel转义时候报错,其实对比可见,两个分支不同的地方应该是node_moduels依赖,所以解决方案就是:将micro分支的依赖删除重新install. 然而事实并非想象的那么简单,昨天进行了node_modules的删除重新install后,问题仍然没有解决,后来在本地重新建立了新的文件夹,git clone远程仓库代码,进行install依赖之后,开…

vue项目 npm run dev在Linux 持久运行

touch run.dev.logchmod u+w run.dev.log 记录日志文件 nohup npm run dev > run.dev.log 2>run.dev.log & exit 一定要控制台执行exit 不记录日志 nohup npm run dev >/dev/null 2>&1 & exit 结束持久npm run dev 查看端口号8080 杀死进程 kill -9 9071…

vue 项目npm run dev ip访问

webpack npm run dev 不能通过ip访问只能通过localhost访问解决方法如下: 修改vue-cli: config/index.js 文件把文件中 host 的值,改成 ip 即可…

vue项目npm run dev报错events.js:160 throw er; // Unhandled 'error' event listen EADDRINUSE :::8002

出错情况,如下图: 报错原因: listen EADDRINUSE :::8002 意思是当前8002端口被占用解决办法: 一:简单粗暴:关掉可能影响的相关程序,重新执行启动. 二: 1.Win+R,cmd查询使用的端口号是否被占用: 输入命令:netstat -aon|findstr "8002" 按回车显示占用8080端口对应的程序的PID号:如下图: 2.根据PID号找到对应的程序: 输入命令:tasklist|findstr "12452" 按回车后显示出…

vue项目实战总结

马上过年了,最近工作不太忙,再加上本人最近比较懒,毫无斗志,不愿学习新东西,或许是要过年的缘故(感觉像是在找接口). 就把前一段时间做过的vue项目,进行一次完整的总结. 这次算是详细总结,会从项目的搭建,一直到最后的服务器上部署. 废话不多说了.干货直接上. 一. 必须node环境, 这次就不写node环境的安装了.过两天我会写个node环境的安装随笔. 二. node环境配好后.开整vue. 1. 安装vue脚手架. npm install -g vue-cli 2. 用脚手架搭…

记录vue项目用hbuilder离线打包集成极光推送安卓篇

极光推送的官方demo: https://github.com/jpush/jpush-hbuilder-demo 里面也记录有详细的方法了. 我记录下自己的过程. 首先去极光那里创建一个应用获取AppKey ,创建后如下. 下载极光的demo 地址 https://github.com/jpush/jpush-hbuilder-demo 然后把里面的jpush.js放在vue目录下的static下,在index.html文件并引入 <!DOCTYPE html> <html>…

手把手教你用vue-cli搭建vue项目

手把手教你用vue-cli搭建vue项目本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是看网上的教程一步步搭下来,所以其中的一些步骤说法为了表达正确会进行一定参考. 一. 项目使用技术.框架简单介绍我们使用vue-cli来搭建整个项目,vue-cli就是一个脚手架,步骤很简单,输入几个命令之后就会生成整个项目,里面包括了webpack.ESLint.babel很多配置等等,省了很多事…

webstrom vue项目让局域网访问

vue项目package.json "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",在dev 后面加入--host 0.0.0.0 即可在npm run dev 后通过局域网访问192.168.xxx.xxx:xxxx…

vue项目使用nginx代理

nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构建. 打包vue项目 npm run build 通过上面命令后打包好的静态资源将输出到dist目录中.如图所示如图所示修改nginx配置文件,配置文件为conf下的nginx.conf,修改nginx.conf中的server配置片段 server { listen ;#默认端口是80,如果端…

利用vue-cli搭建vue项目

手把手教你用vue-cli搭建vue项目本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是看网上的教程一步步搭下来,所以其中的一些步骤说法为了表达正确会进行一定参考. 一. 项目使用技术.框架简单介绍我们使用vue-cli来搭建整个项目,vue-cli就是一个脚手架,步骤很简单,输入几个命令之后就会生成整个项目,里面包括了webpack.ESLint.babel很多配置等等,省了很多事…

nginx部署vue项目

nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构建. 打包vue项目 npm run build 通过上面命令后打包好的静态资源将输出到dist目录中.如图所示安装nginx 到nginx官方下载系统相关的nginx版本安装 windows环境下载相应的windows版本解压,解压后如图所示启动命令: cd D:\ProgramFiles…

djang部署vue项目

1,将vue项目npm run build 在此之前需要修改打包后的js,css文件路径: 需新建vue.config.js 在文件中添加: module.exports = { // 输出目录 assetsDir: 'static', // 基本路径 // baseUrl: './', }; 2,在django中新建目录frontend 3,复制打包后的dist文件内容 4,将内容粘贴至frontend文件加内 5,取出static中的文件,放入frontend中,删除static文件 6,配…

nginx代理vue项目

很多项目的前端都使用vue编写的,在项目上线部署的时候,有些项目要求把前端页面和后台服务部署在不同的服务器,这就要求使用nginx代理,本文就来讲讲vue项目怎么使用nginx代理. 项目github地址:https://github.com/Little-Orange7/cmms-vue 一．本地开发配置 Vue项目本地开发,框架自带了一个代理的工具,可以利用这个工具来模拟代理配置: 说明: '/api': {// 请求接口中匹配到/api的接口,都统一走这个代理这个是匹配请求接口的上下文路…

vue项目部署到docker中

通过nginx镜像部署 vue项目npm run build打包成dist目录,有的打包会加上版本号启动 docker 将dist目录通过xftp拷贝到linux服务器上,同目录下新建Dockerfile FROM nginx COPY ./dist/ /usr/share/nginx/html/ COPY nginx.conf /etc/nginx/nginx.conf 第一句指定基础镜像第二句将dist目录下内容拷贝到容器中的/usr/share/nginx/html/目录第三句将ng…

electron打包vue项目

electron是什么 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的. 快速开始electron 直接运行github上关于electron的构建工具 git clone https://github.com/electron/electron-quick-start cd…

Vue项目打包常见问题整理

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

vue项目中使用阿里iconfont图标

在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标库,先看一下官网可以看到有将近两百万的图标量,可以说我们想要的矢量图图标这里大部分都是有的,下面直接开始如何在vue项目中使用,方法有两种方法一:简单粗暴法 1.打开 iconFont官网选择自己喜欢的图标,并且添加购物车例如我现在选择三个图标点击购物车,添加至项目为了方便可以给项目起一个名字选…

vue 项目使用局域网多端访问并实时自动更新（利用 browser-sync）

在写vue的项目中时,虽然vue会自动更新页面,但是切换页面切来切去也很麻烦,有时候我们还要在公司另一台电脑或者手机上调试,这时候利用browser-sync插件,无需改动vue的代码即可实现: 1. 首先确保安装了node (命令行node -v 可以查看) 2.全局安装 browser-sync npm install -g browser-sync (项目中局部安装 npm install --save-dev browser-sync) 3.启动vue项目 npm run d…

vue项目启动报错 spawn cmd ENOENT errno: -4058

vue项目启动报错 spawn cmd ENOENT errno: -4058 运行vue项目(npm run dev)报错提示 'npm' 不是内部或外部命令 cmd输入node -v 有版本号没问题啊那应该是node升级的问题于是我就卸载重新安装总没问题了吧但是新问题来了报错如下 DONE Compiled successfully in 11178ms App running at: - Local: http://localhost:8080/ - Network: una…

Visual code 搭建Vue项目

使用VS Code搭建Vue项目 1.安装 VScode 2..安装最新node.JS 2.安装cnpm镜像淘宝镜像(node自带安装了npm,故不再安装) npm install -g cnpm --registry=https://registry.npm.taobao.org 安装模块时安装方法 $ cnpm install [name] 3.快速学习Vue2.0教程 (中)http://cn.vuejs.org/ (英)https://vuejs.org/ 你要是觉得这些网站访问速度…

vue项目中配置favicon图标

如上图所示,页面顶部的小图标会让页面显得高大上,一般把这种图标叫做favicon图标.利用vue-cli脚手架搭建的项目,如果不手动配置,页面中是不会显示favicon图标. 不配置是这样子的: favicon图标的配置也很简单,vue-cli默认帮我们安装了html-webpack-plugin(如果没有,可以自己npm安装),我们只需在html-webpack-plugin插件中添加favicon选项即可.html-webpack-plugin插件需要配置两处,一处是在开发环境下配置,另一处…

下载一个vue项目执行npm install 后运行项目npm run dev后出错 - 问题解决

在SVN上拉下来一个vue项目,上面没有提交项目里面的node_modules文件夹,所以要自己执行 npm install 安装,但安装完后运行项目后却报错了: $ npm run dev > poverty@1.0.0 dev F:\05 poverty alleviation project\poverty-git > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js .....此处省略加载…

vue项目中打包编译后，CSS样式【-webkit-box-orient: vertical】打包后丢失问题

最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了一下,发现可能是optimize-css-assets-webpack-plugin这个插件的问题,导致打包时这个属性和注释混在了一起(个人猜测),其实解决办法很简单,只需要在这个属性前后加一个特殊注释即可,如下图: 也就是说在使用“-webkit-box-orient: vertical;”需要这…

vue项目更换目录后执行npm run dev 就报错（新手进）

在我们搭建好一个VUE项目的环境后,觉得这个项目存放的位置不好,想移动一下,但是移动后我们发现执行npm run dev就会报下面的错误: 明明只是移动了一下位置,就报错,实在是太恶心了. 但是只要我们细心看一下错误:,然后去node_modules文件夹下去找这个包,会发现这个包是这样的我们发现:这只是一个快捷方式,根本就不是我们下载的module 如果只有一个是这样,我们直接使用npm install semver就OK了,但是很遗憾,这样的东西不是一个而是几百个: 无语...总不能一个个…