Vue-Cli 3.0 + vue.config.js
虽然一直没有亲手搭建过vue项目,但是2.0的时候就开始自学(但并没有实践项目)。然后公司最近有个人用3.0做了个项目,公司让我参与进去,我就顺便学习了一把3.0。(美滋滋)
因为电脑的环境还是之前自学时候的2.0,因此现在需要先升级到3.0。下面是具体步骤:
1. npm uninstall -g vue-cli
2. npm install -g @vue/cli
3. vue create [new-dir] //进去后会有一些选择让你做,我选的default,然后下载用选npm
4. cd [new-dir]
4. npm run serve
至此3.0版本的项目就初始化好。可以看到目录结构真的是非常的精简。我参考同事已经做好的项目,是多了几个文件,分别是:
1. vue.config.js
2. .env & .env.development & .env.[其他环境]
下面就讲下vue.config.js (一个配置文件,替代了2.0的webpack.config.js)
官方说vue.config.js是一个可配的文件,如果存在(与package.json同级),会被@vue/cli-service自动加载
功能:完成关于端口号的配置,打包之后的路径配置,图片的配置等。
i:chainWebpack
允许对内部webpack配置做更细粒度的修改,比如修改、增加loader(链式操作)
chainWebpack:config=>{
config.module.rule('xx').tap( () => {return {key:val,key:val}} ) //修改loader选项
config.module.rule('xx').end() //添加一个新的loader
config.plugin('xx').tap( args => { ...; return args} ) //修改插件选项
}
ii:configureWebpack
调整webpack配置(development(开发)/production(生产))
如果需要基于环境有条件的配置,或者想直接修改配置,就可以返回一个函数,参数会收到已解析好的而配置,在函数内可直接改配置
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
//xxxxx
}else if(process.env.NODE_ENV==='development'){
//xxxx
}
},
iii:css
css的处理
css: {
loaderOptions: { //向css相关的loader传递选项 设置后每个sass文件都会预加载这两个文件
sass: {
data: `@import "@/env/${process.env.VUE_APP_PROJECT_ENV}/css/_variables.scss";
@import "@/css/_variables.scss";`
}
}
}
//声明变量具体的值(主题文件夹下的css文件夹)
$variable-color-theme: #ff8c05;
$variable-color-theme-deeper: #ff7505;
$variable-color-theme-disabled: #f7d5b1;
//主题色是变量(外层css文件夹)
$color-theme: $variable-color-theme;
$color-theme-deeper: $variable-color-theme-deeper;
$color-theme-disabled: $variable-color-theme-disabled;
iv: productionSourceMap:false
如果设置成false,项目在打包后是会压缩加密的,运行速度会加快,但是运行时报错是无法得知
如果设置成ftrue, 项目会加载全部源码,则会具体显示运行时的报错,运行速度会变慢,而且暴露了源码
v: vue-loader+transformAssetUrls
vue-loader: 解析和转换.vue文件,提取出其中的逻辑代码js/css/html,再分别把他们交给对应的loader去处理
transformAssetUrls: 模板编译中,编译器将某些资源的某些属性转成可被调用(etc: img的src属性),使得这些资源可以被webpack处理
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(() => {
return {
transformAssetUrls: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
}
}
})
}
vi:声明新的路径变量 @env
以下@env代表的路径变量为src/env下的,如果是esim环境,就在/esim目录里,如果是wesim环境,就在/wesim目录里
用于:在不同环境下,可能同一位置上引入的组件内容不一样,用于导入这些组件的时候,声明路径
configureWebpack: config => {
Object.assign(config.resolve.alias, {'@env': path.resolve(`src/env/${process.env.VUE_APP_PROJECT_ENV}`)}) }
vii:filemanager-webpack-plugin
用于:在build之前及之后复制、打包、移动、删除文件以及文件夹
const FileManagerPlugin = require('filemanager-webpack-plugin')
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.plugins.push(new FileManagerPlugin({
onEnd: {
archive: [
{
source: './dist',
destination: `./dist/${process.env.VUE_APP_DOMAIN}-${packageInfo.version}.tar`,
format: 'tar',
}
]
}
}))
}
},
Vue-Cli 3.0 + vue.config.js的更多相关文章
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...
- @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件
目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...
- Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
- 基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
- Django + Vue cli 3.0 访问静态资源问题
[问题背景] 用Vue clie 3.0的搭建得框架把我坑死了,在打包后,调用不到静态资源js,css,mp3等 [问题原因] vue cli 3.0打包后,dist目录下没有static目录,而Dj ...
- vue/cli 3.0脚手架搭建
在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli 安装成功: 安装完成 ...
- @vue/cli 4.0+express 前后端分离实践
之前总结过一篇vue-cli 2.x+express+json-server实现前后端分离的帖子,@vue/cli3.0及4.0搭建的项目与vue-cli2.x的项目结构有很大的不同.这里对@vue/ ...
- Configuration Reference In Vue CLI 3.0
Configuration Reference This project is sponsored by #Global CLI Config Some global configurations ...
- vue cli 4.0.5 的使用
vue cli 4.0.5 的使用 现在的 vue 脚手架已经升级到4.0的版本了,前两日vue 刚发布了3.0版本,我看了一下cli 4 和cli 3 没什么区别,既然这样,就只总结一下vue cl ...
- VUE CLI 3.0 安装及创建项目
一.安装 VUE CLI 3.0 官网: https://cli.vuejs.org/ 详细资料可以自己先把官网过一遍. 1. 安装(默认你的电脑上已安装node及npm) npm install ...
随机推荐
- [转]C#多线程学习 之 线程池[ThreadPool]
在多线程的程序中,经常会出现两种情况: 一种情况: 应用程序中,线程把大部分的时间花费在等待状态,等待某个事件发生,然后才能给予响应 这一般使用ThreadPo ...
- ActiveMQ 传输协议
配置 ActiveMQ安装目录的conf/activemq.xml中的<transportConnectors>标签之内. 配置示例 TCP(默认协议,性能相对可靠) Transmissi ...
- Google 打算用 QUIC 协议替代 TCP/UDP
有句话叫做一流企业定标准.二流企业做品牌.三流企业卖技术.四流企业做产品.Google 似乎在冲着一流企业的目标迈进.去年,Google 已经从以 SPDY 为基础的 HTTP 协议 16年 来的首个 ...
- nvm-windows 之nodejs 版本管理
前言 最近准备学习后端相关的东西,但是公司目前的node版本是偏低的,但是现在的node版本变化太快.刚好也有nvm这种版本管理器的存在,简直了都.兴奋之后发现,不支持windows系统,此处~~ ...
- 局域网下共享 MySQL 数据库连接
转载自:https://blog.csdn.net/larger5/article/details/96974554 一.前言 在使用公司的一些开发框架,需要特定的 MySQL 版本,还要做一些配置操 ...
- <每日一题>题目13:列表的简单问题
''' 分析: python赋值是通过指针来进行的. 很显然第一.三.四次调用都指向同一个列表,并未完成清空, 第二次调用只是指向了另一个列表,也未完成清空,很显然结果是累计的 结果: [0, 1] ...
- linux NC网络通信工具的安装
由于开发socket一类工具需要用到管道进行测试,就想到安装个linux nc工具来测试 于是上网找了个rpm安装完发现不可用(公司服务器没外网) 报错内容: [root@rhel071 instal ...
- 2019-6-27-WPF-如何给定两个点画出一条波浪线
title author date CreateTime categories WPF 如何给定两个点画出一条波浪线 lindexi 2019-6-27 10:17:6 +0800 2019-6-26 ...
- Hbase实验:java创建和删除table
开启zookeeper.hadoop.hbase: 打开eclipse创一个java project,然后导入所需jar包: 写好java代码,运行create,然后去hbase shell里查看: ...
- mysql函数替换域名
UPDATE `pigcms_product` SET info = REPLACE ( info, 'oto.mph88.com', 'www.10000fk.net' ) ;