在用vue cli进行项目npm run dev 时候,页面Cannot GET/ 主要是把config/index.js里面的dev:{assetsPublicPath:'/'}改成了跟build里面一样的'./',改回‘/’,然后再重新npm run dev就可以本地正常访问了呢!

vue-cli 项目 build  出错点: 1,build生成dist 放在tomcat上 报错,不显示内容  解决办法: config>index.js===>assetsPublicPath: '/',  修改为 assetsPublicPath: './', note:如果css中图片不显示,打开“build/utils.js”,增加一行代码即可 2,用 axios 请求本地 static 文件中的JSON 文件报错, static文件不经过编译,需要配置根目录 解决办法:配置 'st

安装vue-cli C:\Users\fei>npm install -g vue-cli npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coff eescript" (no hyphen) D:\nodes\node_cache\vue-init -> D:\nodes\node_cache\node_modules\vue-cli\bin\vue -init D:\

兼容IE是个坑,低版本IE很多都没法跑起来 问题现象:vue-cli项目在IE下运行,会在钩子函数出现 ReferenceError: “Promise”未定义 解决办法: step1:安装最新的web-pack-server 命令行:npm install --save-dev webpack-server step2:安装Babel Polyfill 命令行:(1)npm install --save babel-polyfill (2)在webpack.base.conf.js这个文件加入

一.开发环境中跨域 使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问非本机上的接口http://10.1.0.34:8000/queryRole.不同域名之间的访问,需要跨域才能正确请求.跨域的方法很多,通常都需要后台配置,不过 Vue-cli 创建的项目,可以直接利用 Node.js 代理服务器,通过修改vue proxyTable接口实现跨域请求.在vue-cli项目中的config文件夹下的index.js配置文件中,修改前的dev: module.ex

1.安装/升级node环境 vue-cli对于node和npm的版本是有要求的.     可以通过 node -v (npm -v)查看当前版本,通过 where node (where npm)查看安装路径. 如果node版本不符合vue-cli的要求,那么可以在node官网下载稳定版本并安装.     安装过程比较简单,我更新时,除了修改安装路径,其他都是一直Next即可. 这里要提到一点,更新node版本后,查看版本,会发现npm的版本也已经更新了. D:\workspace\MyProj

vue-cli 项目优化之3种方法对比:本地静态库资源(推荐).cdn.DllPlugin 事项 本地静态库资源 cdn DllPlugin 依赖 依赖cdn网站资源(有种完善方法:如果cdn引入不成功,自己注册本地资源) 操作复杂度 简单 简单 复杂 内网使用 可以 不可以 可以 本地静态库资源 方法: 文章地址:https://www.cnblogs.com/cag2050/p/9134930.html demo地址:https://github.com/cag2050/vue_cli_op

vue-cli 项目搭建 1.首先需要安装nodejs(安装省略). 2.用node安装vue-cli. npm install -g vue-cli   3.新建目录用来存放工程. 新建一个vue项目使用webpack作为打包工具,同时命令工程名为second   vue init webpack second   4.使用idea打开second,打开记得需要安装vue插件和nodejs插件.   5.在项目根目录的命令行下输入编译命令 npm install npm run dev   6

vue-cli项目打包: 1. 命令行输入:npm  run  build 打包出来后项目中就会多了一个文件夹dist,这就是我们打包过后的项目. 第一个问题,文件引用路径.我们直接运行打包后的文件夹中的index.html文件,会看到网页一片空白,f12调试,全是css,js路径引用错误的问题. 解决:到config文件夹中打开index.js文件. 文件里面有两个assetsPublicPath属性,更改第一个,也就是更改build里面的assetsPublicPath属性: assetsP

本文档目的在于帮助对vue了解比较少的同学,能够快速配置vue应用中的接口地址.方便项目切换服务环境后,重新修改多组件的http请求地址. 一.前言 我们在上一篇文章分享了vue-cli项目基本搭建(可点击进入查看). 本篇文章我们分享 vue 配置全局对象.在我们平时开发项目的时候,大多数会进行数据交互,这一应用就会使用到交互模块,往往请求的url地址就随着项目模块的增多写在每个模块中,这样的缺点不用我来说,相信大家都知道:模块多了.环境多了很难以维护.修改接口地址,并且很容易出错,哪里多了一

vue-cli项目中引入vue-i18n 安装: npm install vue-i18n可参考vue-i18n官网文档 main.js中引入: import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) 配置语言包(main.js): const i18n = new VueI18n({ locale: 'zh-CN', // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale

登录使用的是node.js搭建的注册登录接口,关于对数据库的读写则是用spring boot的框架来实现的. 1.首先是vue-cli项目里的前端页面的配置: location / { root   /dist  #服务默认启动目录 try_files $uri $uri/ /index.html; #路由的路径资源 index index.html index.htm; #默认访问文件 } 2. 关于后台服务器在nginx里的配置 遇到的问题:项目部署到nginx上后,写的element覆盖样

前言 随着vue在前端不断的壮大,越来越多的前端工程师使用vue了,作为大型项目的开发,vue-cli是不二之选,所以这篇博客是为搭建vue-cli所写,想要搭建vue-cli项目就必须先有git,node.js,webpack, git地址:https://git-scm.com/ node.js地址:http://nodejs.cn/ 本章目标 使用websotm搭建vue-cli项目,前提安装有git,node.js,webpack等等,否则无法实现 项目搭建 然后下面这一段可能会比较久

前言 Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件.通过 Vant,可以快速搭建出风格统一的页面,提升开发效率.目前已有近50个组件,这些组件被广泛使用于有赞的各个移动端业务中.如果你需要开发一个移动商城,用 Vant 就再合适不过了.vant地址:https://youzan.github.io/vant/#/zh-CN/intro 本章目标 在vue-cli的项目中使用vant的相关组件 项目构建 如果您还没有搭建vue-cli项目,

Vue-CLI Vue-CLI 项目在pycharm中配置 第一步 pycharm索引到vue项目的根目录,打开 第二步 安装vue.js插件来高亮 .vue 文件代码(见插图) 第三步 第四步 配置npm启动服务启动vue项目(见插图) 第五步

0830总结 Vue-CLI 项目中相关操作 一.前台路由的基本工作流程 目录结构 |vue-proj | |src | | |components | | | |Nav.vue | | |views | | | |PageFirst.vue | | | |PageSecond.vue | | |App.vue | | |router.js App.vue:根组件 <template> <div id="app"> <!--根组件只需要书写router-v

Vue-CLI项目中路由传参 一.标签传参方式:<router-link></router-link> 第一种 router.js { path: '/course/detail/:pk', name: 'course-detail', component: CourseDetail } 传递层 <!-- card的内容 { id: 1, bgColor: 'red', title: 'Python基础' } --> <router-link :to="

08.31自我总结 Vue-CLI项目-vue-cookie与vue-cookies处理cookie vue-cookie 一.模块的安装 npm install vue-cookie --save #--save可以不用写 二.配置main.js // 配置cookie import cookie from 'vue-cookie' Vue.prototype.$cookie = cookie; //配置时候prototype.$这里的名字自己定义不是固定是cookie 三.使用 create

08.31自我总结 Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axios from 'axios' Vue.prototype.$axios = axios; 三.使用 created() { // 组件创建成功的钩子函数 // 拿到要访问课程详情的课程id let id = this.$route.params.pk || this.$route.query.pk

0901自我总结 Vue-CLI项目vuex仓库 一.概念 vuex仓库是vue全局的数据仓库,好比一个单例,在任何组件中通过this.$store来共享这个仓库中的数据,完成跨组件间的信息交互. vuex仓库中的数据,会在浏览器刷新后重置 二.使用 store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); export default new Vuex.Store({ state: { // 设置任何组件都能访问

0901自我总结 Vue-CLI项目路由案例汇总 router.js import Vue from 'vue' import Router from 'vue-router' import Course from './views/Course' import CourseDetail from './views/CourseDetail' Vue.use(Router); export default new Router({ mode: 'history', base: process.e