vue2.0 build后无法打开

vue2创建webpack项目build之后无法正常显示页面的问题

最近在做vue项目的时候,项目正常运行,但是当我打包上线之后,却出现无法出现页面空白的情况,打开控制台,发现无法加载到css和js文件. 仔细观察发现路径中少了一个dis文件夹,于是我加上dist文件夹单独访问css文件 http://localhost:4396/dist/static/css/app.5f6e046c01a10a67012602ec1dfe38ac.css 发现还是无法访问到,后来想到由于我用的是websotrm编译器,自带的本地服务端口是localhost:4396,这是我

基于vue2.0的后管系统（配置篇）

一些项目依赖package.json { "name": "frontend", "description": "tssp based on vue2.0 frame", "version": "1.0.0", "author": "tom.h@vipshop.com", "private": true, "scrip

Source Insight 4.0安装后首次打开报错Unable to open or create

错误提示大概如下: Unable to open or create ....我的文档/source insght4.0/xxx.sidb. 这个错误提示就是找不到这个文件,原因是应为有中文路径,那么需要修改默认路径.终极办法就是通过注册表修改, 找到如下项:HKEY_CURRENT_USER\Software\Source Dynamics\Source Insight\4.0\Paths 右键新建一个字符串值,名称为UserDataDir,值为你的默认路径(千万别有中文)如D:\Progra

npm run build后如何打开index.html跑起项目

Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work. 提示:构建的文件应该通过HTTP服务器提供服务.在文件:/上打开index.html不起作用. 其实直接本地就可以打开... 只需要在build配置文件修改: assetsPublicPath: './', build: { // Template for index.html i

vue2.0在IE11无法打开的解决办法

npm 安装bebel-polyfill npm install --save-dev babel-polyfill 在webpack.base.conf.js文件中将 module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js', } 改为 module.exports = { context: path.resolve(__dirname, '../'), entry: {

vue2.0 项目build后资源文件报错404的解决方案

当vue项目build后,我们会看到css.js报错404的问题: 那我们就去找错误原因吧. 首先,查看build后的dist文件目录可以看出,js.css在index.html的同级目录下: 然后,查看index.html,看到下面的代码 <script type=text/javascript src=/static/js/app.41ce5f66426864089c57.js></script> 我们先普及下文件路径的知识 ../上级目录 ./同级目录 /根目录

如何解决vue2.0 打包之后打开index.html出现空白页

如何解决vue2.0 打包之后打开index.html出现空白页 1.打包之前修改三个文件 1.1.第一步,找到build文件,在webpack.prod.conf.js 第25行左右有一个对象为 output,在这里面增加一行代码 publicPath:'./' output: { //在这里加一行代码 publicPath:'./', path: config.build.assetsRoot, filename: utils.assetsPath('js

mac版chrome升级到Version 65.0.3325.18后无法打开百度bing搜狗

mac版本chrome升级到Version 65.0.3325.18后发现突然无法访问百度,搜狗,bing,神马等一系列的国内搜索引擎网站.连百度的儿子们比如知道,百度百科都无法访问. 1.首先想到的是chromeDNS缓存问题,清理掉.无效 2.想到可能是我FQ,mac系统DNS缓存原因,清理掉MAC的DNS缓存,还是无效用safari打开google,百度,搜索各种办法,无效对于用惯了chrome而又有点强迫症的来说,不搞定不罢休于是,关闭chrome所以插件,还是无效重置chron

Vue2.0项目使用bootstrap后提示Module parse failed: Unexpected character

具体报错如下: 报错原因是: Vue2.0无法识别bootstrap.css中使用的字体,也就是上图中圈出来的地方. 解决方案: // 需要在webpack.config.js增加对不识别文件的处理 { test: /.(ttf|woff2|woff|eot)$/, loader: "file-loader", options: { name: "[name].[ext]?[hash]" } }

vue2.0那些坑之使用elementUI后v-on:click事件不生效问题

最近在维护vue2.0的项目,遇到了不少坑,在这里说下引用elementui之后,使用v-on:click绑定点击事件无效的情况,如下图: 我想阻止冒泡事件,发现无效.这里将@click换成了@click.native,就有效果了,具体原因不清楚,有哪位大佬知道原因可以告诉一下~~~

vue2.0 开发实践总结之入门篇

vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用 vue + vue-router + vuex (传说中的vue 全家桶 ),构建工具使用尤大大推出的vue-cli 后续文章:如果有兴趣,可以移步 vue2.0 开发实践总结之疑难篇项目是图片分享社交平台. 项目预览: 1 .vue-cli构建工具必知我选用的vue-cli 是基于webpack的版本 ,不了解webpack的可以先粗略看下下面的基本知识 webpack 基本知识点: entry:入口点,w

vue2.0入门

vue2.0 开发实践总结之入门篇 vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用 vue + vue-router + vuex (传说中的vue 全家桶 ),构建工具使用尤大大推出的vue-cli 后续文章:如果有兴趣,可以移步 vue2.0 开发实践总结之疑难篇项目是图片分享社交平台. 项目预览: 1 .vue-cli构建工具必知我选用的vue-cli 是基于webpack的版本 ,不了解webpack的可以先粗略看下下面的基本知识 webpac

Vue2.0环境搭建和测试demo

Vue2.0 推荐开发环境 Homebrew 1.0.6(Mac).Node.js 6.7.0.npm 3.10.3.webpack 1.13.2.vue-cli 2.4.0.Atom 1.10.2 安装环境打开终端运行以下命令安装brew(Windows 跳过这步) /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 安装 nodejs

vue2.0版cnode社区项目搭建及实战开发

_________________________________________________________________________ 初涉vue就深深的被vue强大的功能,快速的开发能力所折服.所以就写了一个cnode社区的app来实践对vue的学习成果.也算是入坑指南吧,如果您觉得对您有帮助,就在github上给个star吧,代码拙劣,大神请忽略... 前言利用cnode中文社区提供的API,一步一步实现vue项目的搭建及开发. 线上地址:https://cnode.appli

vue2.0+element+node+webpack搭建的一个简单的后台管理界面

闲聊: 今天是六一儿童节哟,小颖祝大家节日快乐哈哈哈.其实这个demo小颖断断续续做了将近两个礼拜了,心塞的,其实这个也没有多难,主要是小颖有点最近事情有点多,所以就把这个一直拖着,今天好不容易做好了嘻嘻.我们一起来看看效果图吧: 相关技术: 1.vue2.0 2.webpack 3.element 4.vue-router vue2.0环境搭建: 1.检查本地是否安装node:node -v 如果没有安装从node官网上下载相应的node,安装成功即可. 2.检查本地npm版本:npm -v,

重开Vue2.0

目录: 内容: 一.Vue内部指令: 1.v-if v-else&v-show v-if与v-show都是选择性显示内容的指令,但是二者之间有区别: 1.v-if:判断是否加载,在需要的时候加载,减少服务器压力 2.v-show:调整css display属性,使客户端操作更加流畅 v-if: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&

干货分享：vue2.0做移动端开发用到的相关插件和经验总结(2)

最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api(微信分享,微信支付),百度地图api(如何实例化地图,给地图添加自定义覆盖物,给地图添加自定义标注,对地图进行缩放,拖拽等)的相关使用,开阔了自己的知识眼界:现将我开发过程中积累的相关经验与大家进行分享,希望和大家一起学习和进步.... vux:Vue 移动端 UI 组件库的使用: vue-lazy

Vue2.0 新手完全填坑攻略——从环境搭建到发布

Jinkey原创感谢 showonne.yubang 技术指导Demo 地址:http://demo.jinkey.io/vue2源码:https://github.com/Jinkeycode/vue2-example 什么是 Vue Vue 是一个前端框架,特点是数据绑定比如你改变一个输入框 Input 标签的值,会自动同步更新到页面上其他绑定该输入框的组件的值数据绑定组件化页面上小到一个按钮都可以是一个单独的文件.vue,这些小组件直接可以像乐高积木一样通过互相引用而组装起来组

vue2.0做移动端开发用到的相关插件和经验总结

最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api(微信分享,微信支付),百度地图api(如何实例化地图,给地图添加自定义覆盖物,给地图添加自定义标注,对地图进行缩放,拖拽等)的相关使用,开阔了自己的知识眼界:现将我开发过程中积累的相关经验与大家进行分享,希望和大家一起学习和进步.... vux:Vue 移动端 UI 组件库的使用: vue-lazy

Vue2.0+Webpack项目环境构建到发布

前言:为什么要用webpack搭建项目呢,因为这个工具可以把目前浏览器不全部支持的ES6语法,通过打包工具生成所有浏览器都支持的单个JS文件. 参考: https://blog.csdn.net/u012863664/article/details/72813941 使用vue2.0+webpack搭建项目的步骤如下,以下全在命令窗口输入命令语句: 安装node和npm node下载:node下载地址新版的node集成了npm,所以node安装好后npm也一并安装好了,我们可以通过cmd命令行

Vue2.0项目

什么是 Vue Vue 是一个前端框架,特点是数据绑定比如你改变一个输入框 Input 标签的值,会自动同步更新到页面上其他绑定该输入框的组件的值组件化页面上小到一个按钮都可以是一个单独的文件.vue,这些小组件直接可以像乐高积木一样通过互相引用而组装起来 Vue2.0 推荐开发环境 Homebrew 1.0.6(Mac).Node.js 6.7.0.npm 3.10.3.webpack 1.13.2.vue-cli 2.4.0.Atom 1.10.2 安装环境打开终

vue2.0 build后无法打开

热门专题