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()    //添加一个新的loaderconfig.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',}]}}))}},

转载于:https://www.cnblogs.com/artimis/p/10641058.html

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 正式发布，Vue.js 开发标准化工具
Vue CLI 3.0 已发布,该版本经历了重构,旨在: 减少现代前端工具的配置烦扰,尤其是在将多个工具混合在一起使用时: 尽可能在工具链中加入最佳实践,让它成为任意 Vue 应用程序的默认实践. V ...
基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
vue/cli 3.0 与 2.0脚手架怎样mock数据
vue/cli 3.0 与 2.0脚手架怎样mock数据 3.0 移除了 static 文件目次,新增了 public 目次,这个目次下的静态资本不会经由 webpack 的处置惩罚,会被直接拷贝,所 ...
体验 vue cli 3.0
vue cli 3x 发布已经有好长一段时间了,webpack 4x 现在版本已经到了 4.28.0:如果你现在用或者不用手脚架搭建项目,我都推荐你使用 webpack 4x,体验一把新技术带来的变化 ...
Vue CLI 3.0脚手架如何在本地配置mock数据json
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
Vue Cli 3.0打包生成app
1.vue cli 3.0创建新工程,添加依赖mint-ui 2.项目配置中,公共路径设置为./,(注意,这一步非常重要,否则打包后项目找不到项目中文件) 修改保存后,可以看到vue.confi ...
Vue CLI 3.0正式发布！
web前端教程用大白话,来讲编程网友们纷纷点赞,也有网友调侃学不动了! 尤雨溪表示,Vue CLI 3.0 与其他的版本完全不同,它经历了重构,目的是: 1.尽可能减少现代前端工具在配置上的烦恼, ...
@vue/cli 3.0 eslint 转成tslint
我们用 vue/cli 创建新项目的时候,通常会选择代码检查工具 [eslint|tslint],有的时候难免会选错,这个时候想要替换,怎么办场景再现 vue create lint-vue 为了方 ...

Vue-Cli 3.0 + vue.config.js

Vue-Cli 3.0 + vue.config.js相关推荐

最新文章

热门文章