Vue Cli3 项目配置

一、新建项目

使用vue-cli3构建一个初始的Vue项目：Cli3 官方文档

以下配置是我在项目中常用的，大家可自己斟酌是否需要使用！

1、环境变量

主要用于区分开发、测试、正式环境的

(1) 在根目录新建三个文件：.env.dev.env.test.env.prod

(2).env.dev写入

NODE_ENV = 'development'VUE_APP_CURRENTMODE = 'test'

(3).env.test写入

NODE_ENV = 'production'VUE_APP_CURRENTMODE = 'test'

(4).env.prod写入

NODE_ENV = 'production'VUE_APP_CURRENTMODE = 'prod'

(5) 修改package.json的script

"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint"}

修改为

"scripts":{"serve":"vue-cli-service serve --mode dev",// 本地运行"btest":"vue-cli-service build --mode test",// 测试环境打包"build":"vue-cli-service build --mode prod",// 正式环境打包"lint":"vue-cli-service lint"}

(5) 在main.js写入

// 是否为测试环境Vue.prototype.$istest=process.env.VUE_APP_CURRENTMODE==='test'console.log('当前NODE_ENV：'+process.env.NODE_ENV)console.log('当前VUE_APP_CURRENTMODE：'+process.env.VUE_APP_CURRENTMODE)console.log('是否为测试环境：'+Vue.prototype.$istest)

(6) 重启npm run serve，这里就不要使用vue ui启动项目了，反正我通过它启动后，无法获取process.env.VUE_APP_CURRENTMODE的值，只能通过命令行运行npm run serve启动

控制台打印结果：

image

2、别名设置

(1) 在vue.config.js顶部新增

// path依赖constpath=require('path')// 查找文件方法constresolve=dir=>{returnpath.join(__dirname,dir)}

(2) 在vue.config.jsmodule.exportschainWebpack新增

// 别名配置config.resolve.alias.set('assets',resolve('src/assets')).set('components',resolve('src/components'))

(3) 重启npm run serve生效

若你使用的别名是图片路径的话

1、普通引入图片：需要这样使用<img src="~assets/img1.jpg" />，不能省略~

2、动态引入图片：需要这样使用<img :src="require('assets/img2.jpg')" />，不能加上~

3、css背景图：background-image: url('~assets/img1.jpg')，不能省略~

3、全局Sass配置

在使用sass时，难免会书写一些常用的变量、函数、混合等，除了变量可以继承外，其他的只能在当前文件生效，那岂不是我需要在每一个.vue里面的<style lang="scss">手动引入@import '~@/style/mixin.scss';。答案肯定是不用啦，完全可以配置成全局的

(1) 在vue.config.jsmodule.exports新增

// SASS配置css:{loaderOptions:{sass:{data:'@import "@/style/app.scss";'}}}

(2) 在src新建style文件夹，然后在style新建app.scss

// 一些变量$primary:#3398ff;$success:#29cc7a;$danger:#ee6869;// 一些混合@mixin primary{color:$primary;}@mixin success{color:$success;}@mixin danger{color:$danger;}// 一些循环@for$ifrom12through30{.f#{$i} {font-size:1px*$i!important;}}

(3) 重启npm run serve，然后在.vue使用

在<style lang="scss">中使用

.div1{color:$primary;// 使用scss变量}.div2{@includesuccess;// 使用scss混合}

在template中使用

<divclass="f24">使用scss循环生成的类名（.f12~.f30）f代表：font-size</div>

4、全局默认Css配置

在public/index.html里面的<head>新增<style>即可

如

5、基础组件的自动化全局注册

(1) 在src/components新建global.js

importVuefrom'vue'// 找到components文件夹下以.vue命名的文件constRC=require.context('.',true,/\.vue$/)RC.keys().forEach(fileName=>{constcomponentConfig=RC(fileName)// 因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾，只保留真正的文件名letcomponentName=fileName.replace(/^\.\//,'').replace(/\.\w+$/,'')letindex=componentName.indexOf('/')if(index!==-1)componentName=componentName.substr(index+1)Vue.component(componentName,componentConfig.default||componentConfig)})

(2) 在main.js里面引入

import'./components/global'

(3) 不用重启，直接在.vue里面template写组件即可

<hello-world/>

6、Vuex配置

(1) 安装依赖：cnpm i -S vuex-persistedstate

vuex在刷新后会重新更新状态，但是有时候我们并不希望如此。例如全局相关的，如登录状态、token、以及一些不常更新的状态等，我们更希望能够固化到本地，减少无用的接口访问，以及更佳的用户体验。

vuex-persistedstate：即可解决，可将值放到sessionStorage或localStorage中

(2) 在src/store.js修改

importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)exportdefaultnewVuex.Store({state:{},mutations:{},actions:{}})

修改为

importVuefrom'vue'importVuexfrom'vuex'importcreatePersistedStatefrom'vuex-persistedstate'Vue.use(Vuex)exportdefaultnewVuex.Store({state:{// token信息token:''},mutations:{save(state,[key,data,local=false]){if(!key)thrownewError('mutations save need key！')constkeyPath=key.split('.')constlen=keyPath.lengthconstlastKey=keyPath.pop()letneedSave=statefor(leti=0;i<len-1;i++){needSave=needSave[keyPath[i]]}if(!needSave.hasOwnProperty(lastKey)){thrownewError(`【${key}】 Error Key: ${lastKey}`)}needSave[lastKey]=dataif(local){window.sessionStorage.setItem(key,JSON.stringify(data))}}},plugins:[createPersistedState({storage:window.sessionStorage})]})

(3) 无需重启，直接刷新页面即可成功使用vuex

(4) 在.vue中，执行

this.$store.commit('save',['token','token2'])

即可改变 state.token 的值

7、Vue-Router配置

(1) 安装依赖：cnpm i -S vue-router-auto

vue-router-auto：将项目文件自动转为相应的路由配置

(2) 在src/route.js修改

importVuefrom'vue'importRouterfrom'vue-router'importHomefrom'./views/Home.vue'Vue.use(Router)exportdefaultnewRouter({mode:'history',base:process.env.BASE_URL,routes:[{path:'/',name:'home',component:Home},{path:'/about',name:'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component:()=>import(/* webpackChunkName: "about" */'./views/About.vue')}]})

修改为

importVuefrom'vue'importRouterfrom'vue-router'importautoRouterfrom'vue-router-auto'// 引入依赖if(!window.VueRouter)Vue.use(Router)// 自动生成路由数据constroutes=autoRouter({redirect:'/home',rc:require.context('@/views',true,/\.vue$/)})// 将生成的路由数据，挂载到 new RouterexportdefaultnewRouter({mode:'history',base:process.env.BASE_URL,routes})

8、api请求配置

(1) 安装依赖：cnpm i -S axios hzq-axios

hzq-axios：对 axios 请求的二次封装，封装成 Vue 插件 this.$api ，并支持Axios请求、响应拦截

(2) 在src下，新建apiurl文件夹，在apiurl文件夹下新建index.js

exportdefault[{name:'GetImageCaptcha',url:'/Captcha/GetImageCaptcha'}]

(3) 在main.js里引入并使用：

importhzqAxiosfrom'hzq-axios'Vue.use(hzqAxios,require.context('@/apiurl',true,/\.js$/),{baseURL:'/api',// 请求拦截之前beforeRequest(config){console.log(config)returnconfig},// 接口响应成功事件respSuccess(res){console.log(res)},// 接口响应失败事件respError(e){console.log(e)}})

(4) 在vue.config.jsmodule.exports新增devServer的设置

devServer:{// 代理proxy:{'/giftapi':{target:'http://***.***.com',ws:true,changeOrigin:true}}}

(5) 重启npm run serve生效

(6) 在.vue中，这样使用

this.$api.GetImageCaptcha().then(res=>{if(res.code===1){console.log(res.data)}})

9、Vue全局方法、变量配置

(1) 安装依赖：cnpm i -S hzq-tool

hzq-tool：基于 Vue 对一些常用的工具函数进行封装，通过this.$tool调用

(2) 在main.js引入并使用

importhzqToolfrom'hzq-tool'Vue.use(hzqTool)

(3) 无需重启，在.vue里面使用

constb={name:'12'}consta=this.$tool.copy(b)// 深拷贝方法this.$setItem('id','123456')// 往sessionStorage存入数据

原文链接：//www.greatytc.com/p/d7250d185532