1,按照官网安装步骤install

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

2,生产部署(npm run build)时会遇到静态文件路径问题

解决如下:

3,背景图片引用地址问题

上面虽然解决了资源路径的引用问题,但是资源里面的背景图片,不像index.html中加载资源一样,通过./static/js/app.js引用可以正常加载,图片资源是通过css加载的,如 background: url("../../assets/images/logo-index.png") no-repeat;被相对打包后变成了url(static/img/logo-index.2f00bf2.png) no-repeat所以我们要保留css引用图片的正常路径,如下:

新增:publicPath:'../../'

3,使用element-ui、mint-ui时的注意

1,修改.babelrc文件后,出现Couldn't find preset "es2015" relative to directory问题错误

解决:npm install babel-preset-es2015 -S

文章摘选:https://www.cnblogs.com/moqiutao/p/7496718.html

webpack+vuecli问题记录

webpack+vuecli使用问题总结的更多相关文章

  1. webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  2. [Vuejs] webpack+vue-cli打包如何引用相对路径

    默认情况下通过webpack+vuec-li打包的css.js等资源,路径都是绝对的,即static在根目录下,假如部署到带有文件夹目录的项目中,资源路径就会出错,如何解决. 1.修改资源引用相对路径 ...

  3. webpack+vuecli打包常见的2个坑

    第一个坑: 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的.但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径 ...

  4. webpack vue-cli 一有空格和分号就报错

    webpack vue-cli 一有空格和分号就报错 eslintrc.js 这是ESLint的配置文件,至于为什么用ESLint的话,就是为了自动检查代码,保持一致的代码风格,从而保证代码质量. 这 ...

  5. vue之webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用

    问题描述 一般情况下,通过webpack+vue-cli默认打包的css.js等资源,路径都是绝对的 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径 ...

  6. [整理] webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用

    webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用 https://www.cnblogs.com/moqiutao/p/7496718.html

  7. webpack + vuecli多页面打包基于(vue-template-admin)修改

    转: webpack + vuecli多页面打包基于(vue-template-admin)修改 遇见的问题TypeError: Cannot read property 'tap' of undef ...

  8. 从零开始系列之vue全家桶(1)安装前期准备nodejs+cnpm+webpack+vue-cli+vue-router

    写在前面: 什么是全家桶? 包含了vue-router(http://router.vuejs.org),vuex(http://vuex.vuejs.org), vue-resource(https ...

  9. node+webpack+vue-cli

     安装nodejs + 安装webpack + 安装vue-cli+安装脚手架模板+安装依赖+运行 1 安装nodejs 去官网安装node.js( http://www.runoob.com/nod ...

随机推荐

  1. PC端-上传头像并裁剪

    界面一: <link href="../theme/js/layui.layim/src/css/layui.css" rel="stylesheet"/ ...

  2. 代码整洁之道读书笔记(Ch4-Ch7)

    这几章从注释.程序格式.对象与数据结构的规范以及错误处理四个方面介绍了如何使代码变得简洁易懂.不同于上次摘抄的方法,这一次我会结合第一次个人作业的代码进行分析. 第四章  注释 这一章告诉我们,好的注 ...

  3. zabbix共享内存报错cannot create semaphore set

    zabbix共享内存报错 cannot open log: cannot create semaphore set: [28] No space left on device 报错原因: kernel ...

  4. 13.用别名(alias)创建你自己的命令

    现在是时候,感受第一次编程经历了!我们将用 alias 命令创建我们自己的命令.但在 开始之前,我们需要展示一个命令行小技巧.可以把多个命令放在同一行上,命令之间 用”;”分开.它像这样工作: com ...

  5. CSS中的line-height

    基本概念 行高.行距 行高是指文本行基线间的垂直距离.那什么是基线呢?记不记得vertical-align属性有个baseline值,这个baseline就是基线. 注意:倒数第二根才是基线(base ...

  6. C# winform中 窗体缩放自适应的方法(不同电脑/不同分辨率)

    C# winform中 窗体缩放自适应的方法(不同电脑/不同分辨率)   窗体缩放是一个困扰我多时的问题,为了解决这个问题,我从网上找了很多相关的资料,很多人说用Anchor和Dock属性,但是我试了 ...

  7. 三、WPF 全选,反选,以及获取选中行

    页面代码 <TextBlock> <CheckBox Name="cbAllCreate" Click="CbAllCreate_Click" ...

  8. django定义Model中的方法和属性

    #定义一个Model class UserProfile(models.Model): user=models.OneToOneField(User,unique=True) phone=models ...

  9. C++ 重载 重写 重定义

    重写:存在于类的继承,修饰符是virtual,函数的参数个数,顺序,类型,均相同. 重载:函数的参数列表,类型,顺序不相同. 重定义:对父类的函数进行屏蔽,参数列表可以不相同,没有virtual修饰

  10. 部署Docker distribution仓库

    环境准备: 下载docker yum文件 # wget -O /etc/yum.repos.d/aliyun.repo http://mirrors.aliyun.com/repo/Centos-7. ...