访客 1、多环境配置
多环境变量是在项目开发·打包·生产时产生的概念，所谓的多环境变量指的就是一个项目适配多种环境。
- 开发环境：一般是本地开发时所使用的环境，改动很频繁
- 测试环境：较为稳定的版本，一般用于部署测试
- 生产环境：发布到线上的版本
1.1配置启动命令
配置不同环境变量可避免切换不同环境时手动修改项目配置，请求url等
在package.json文件中这样设置：
"scripts":{"serve":"vue-cli-serviceserve",//开发环境"serve:test":"vue-cli-serviceserve--modetest",//测试环境"build:test":"vue-cli-servicebuild--modetest","build:production":"vue-cli-servicebuild--modeproduction",//生产环境},1.2在根目录创建.env文件
注意：.env文件是环境配置，不允许胡乱命名
.env.development
#开发环境NODE_ENV=developmentVUE_APP_ENV=development#开发环境，接口地址VUE_APP_BASE_URL=.env.production
#生产环境ODE_ENV=productionVUE_APP_ENV=production#生产环境，接口地址VUE_APP_BASE_URL=.env.test
#测试环境NODE_ENV=testVUE_APP_ENV=test#测试环境，接口地址VUE_APP_BASE_URL=要点
.env文件中的默认属性有NODE_ENV和BASE_URL- 添加的属性名必须以
VUE_APP_开头，如：VUE_APP_XXX - 可以通过
process.env在任何地方访问到当前环境配置属性
1.3获取属性
//process.env会根据当前的环境，加载对应的环境变量文件中的变量console.log(process.env.VUE_APP_BASE_URL)axios.defaults.baseURL=process.env.VUE_APP_BASE_URL2、SCSS配置
2.1样式初始化
作用：
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
安装
yarnaddnormalize.css使用
main.js导入normalize.css
import{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'import'normalize.css'//直接导入createApp(App).use(store).use(router).mount('#app')推荐直接下载normalize.css，然后在main.js引入
2.2使用ElementUI
添加依赖
yarnaddelement-ui在项目中改变SCSS变量
Element的theme-chalk使用SCSS编写，如果你的项目也使用了SCSS，那么可以直接在项目中改变Element的样式变量。新建一个样式文件，例如element-variables.scss，写入以下内容：
/*改变主题色变量*/$--color-primary:teal;/*改变icon字体路径变量，必需*/$--font-path:'~element-ui/lib/theme-chalk/fonts';@import"~element-ui/packages/theme-chalk/src/index";之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入Element编译好的CSS文件）：
//main.tsimportVuefrom'vue'importElementfrom'element-ui'import'./element-variables.scss'Vue.use(Element)注意
如果运行报如下错误
解决办法sass版本修改为1.32.13,执行下面命令
yarnaddsass@1.32.132.3变量配置
在src/assets/scss下新建变量配置文件：mixin.scss
//全局scss变量$theme-color:#317FEA;$activeColor:#147af7;//暴露为js变量:export{themeColor:$theme-color;}vue.config.js文件配置（重新启动项目）
module.exports={outputDir:'dist',publicPath:'/',//配置scss文件全局变量css:{loaderOptions:{//没有分号会报错sass:{//data:'@import"@/assets/css/vars.scss";'//旧版sass-loader写法(8.0以下)prependData:`@import"@/assets/scss/minix.scss";`//新版scss-loader(8.0及以上)}}},}其他组件中直接使用
&:hover{color:#fff;background:$activeColor;}3、vue.config.js配置
相关配置说明
//这里的webpack配置会和公共的webpack.config.js进行合并module.exports={//执行npmrunbuild统一配置文件路径（本地访问dist/index.html需'./'）//NODE_ENV：Node.js暴露给执行脚本的系统环境变量。通常用于确定在开发环境还是生产环境//publicPath:'/',publicPath:process.env.NODE_ENV==='production'?'':'/',outputDir:'dist',//输出文件目录//assetsDir:'static',//放置静态资源//indexPath:'index.html',//可以不设置一般会默认//filenameHashing:true,//文件命名lintOnSave:false,//设置是否在开发环境下每次保存代码时都启用eslint验证//runtimeCompiler:false,//是否使用带有浏览器内编译器的完整构建版本configureWebpack:{//别名配置resolve:{alias:{//'src':'@',默认已配置'assets':'@/assets','common':'@/common','components':'@/components','api':'@/api','views':'@/views','plugins':'@/plugins','utils':'@/utils',}}//使用前面可加~},productionSourceMap:false,//如果你不需要生产环境的sourcemap，可以将其设置为false以加速生产环境构建css:{//css相关配置//是否将组件中的CSS提取至一个独立的CSS文件中，生产环境下是true，开发环境下是falseextract:process.env.NODE_ENV==="production",//是否为CSS开启sourcemap。设置为true之后可能会影响构建的性能。sourceMap:false,//启用CSSmodulesforallcss/pre-processorfiles.(预加载)requireModuleExtension:true,loaderOptions:{scss:{//data:'@import"@/assets/css/vars.scss";'//旧版sass-loader写法(8.0以下)prependData:`@import"@/assets/scss/minix.scss";`//新版scss-loader(8.0及以上)}}},devServer:{port:2021,//设置端口号host:'10.32.120.69',//ipdisableHostCheck:true,//是否关闭用于DNS重绑定的HTTP请求的HOST检查hotOnly:false,//热更新https:false,//https:{type:Boolean}配置前缀open:false,//配置自动启动浏览器proxy:null,//设置代理//proxy:{//目的是解决跨域，若测试环境不需要跨域，则不需要进行该配置//'/api':{//拦截以/api开头的url接口//target:'https://api.taobao.cn/',//目标接口域名//changeOrigin:true,//是否跨域//ws:true,//如果要代理websockets，配置这个参数//secure:false,//如果是https接口，需要配置这个参数////标识替换////原请求地址为/api/getData将'/api'替换''时，////代理后的请求地址为：http://xxx.xxx.xxx/getData////若替换为'/other',则代理后的请求地址为http://xxx.xxx.xxx/other/getData//pathRewrite:{//标识替换//'^/api':'/'//重写接口后台接口指向不统一所以指向所有///'^/api':'/api/mock'//}//}//}},//这个插件中添加的serviceworker只在生产环境中启用(例如，只有当你运行npmrunbuild或yarnbuild时)。//不推荐在开发模式中启用serviceworker，因为它会导致使用以前缓存的资产而不包括最新的本地更改的情况。pwa:{//serviceWorker:false,//允许您从一个现有的serviceworker文件开始，并创建一个该文件的副本，并将“预缓存清单”注入其中。//workboxPluginMode:'InjectManifest',//workboxOptions:{////swSrc:'./app/sw.js',/*Emptyfile.*///},iconPaths:{favicon32:"favicon.ico",favicon16:"favicon.ico",appleTouchIcon:"favicon.ico",maskIcon:"favicon.ico",msTileImage:"favicon.ico"}}}4、.eslintrc.js常见问题和配置
4.1常见问题
报错一：
ESLint:Missingreturntypeonfunction.(@typescript-eslint/explicit-module-boundary-types)
解决方法：
在.eslintrc.js文件里添加规则禁用它
"rules":{"@typescript-eslint/explicit-module-boundary-types":"off"},报错二：
ESLint:Typestringtriviallyinferredfromastringliteral,removetypeannotation.(@typescript-eslint/no-inferrable-types)
报错原因：
TypeScript代码类似：
constweb:string="HelloWorld";从字符串文字中简单推断出字符串类型，删除类型注释。eslint@typescript-eslint/no-inferrable-types
他觉得已经推断出是字符串类型，不需要写了
解决方法：
在.eslintrc.js文件里添加规则禁用它
rules:{"@typescript-eslint/no-inferrable-types":"off"//关闭类型推断}报错三：
ESLint:Requirestatementnotpartofimportstatement.eslint@typescript-eslint/no-var-requires
解决方法：
"rules":{'@typescript-eslint/no-var-requires':'off'},报错四：
warningUnexpectedany.Specifyadifferenttype@typescript-eslint/no-explicit-any
解决方案：
关闭any类型的警告。
"rules":{'@typescript-eslint/no-explicit-any':'off'},报错五：
ESLint:Forbiddennon-nullassertion.(@typescript-eslint/no-non-null-assertion)
解决方案：
"rules":{@typescript-eslint/no-non-null-assertion':'off'},报错六：
SLint:‘xxx’isnotdefined.(no-undef)//说明全局变量未定义
解决方案：
"rules":{...},"globals":{"xxx":true//xxx为你的全局变量}我项目的配置如下：
module.exports={root:true,env:{node:true},extends:['plugin:vue/essential','@vue/standard','@vue/typescript/recommended'],parserOptions:{ecmaVersion:2020},rules:{'no-console':process.env.NODE_ENV==='production'?'warn':'off','no-debugger':process.env.NODE_ENV==='production'?'warn':'off','space-before-function-paren':'off','@typescript-eslint/no-explicit-any':'off','@typescript-eslint/explicit-module-boundary-types':'off','@typescript-eslint/ban-ts-comment':'off','@typescript-eslint/no-var-requires':'off'}}5、tsconfig.json说明
项目根目录下生成一个tsconfig.json文件，下面是一份tsconfig.json的说明：
{"compilerOptions":{/*基本选项*/"target":"es6",//指定ECMAScript目标版本:'ES3'(default),'ES5','ES6'/'ES2015','ES2016','ES2017',or'ESNEXT'"module":"commonjs",//指定使用模块:'commonjs','amd','system','umd'or'es2015'"lib":[],//指定要包含在编译中的库文件"allowJs":true,//允许编译javascript文件"checkJs":true,//报告javascript文件中的错误"jsx":"preserve",//指定jsx代码的生成:'preserve','react-native',or'react'"declaration":true,//生成相应的'.d.ts'文件"sourceMap":true,//生成相应的'.map'文件"outFile":"./",//将输出文件合并为一个文件"outDir":"./",//指定输出目录"rootDir":"./",//用来控制输出目录结构--outDir."removeComments":true,//删除编译后的所有的注释"noEmit":true,//不生成输出文件"importHelpers":true,//从tslib导入辅助工具函数"isolatedModules":true,//将每个文件做为单独的模块（与'ts.transpileModule'类似）./*严格的类型检查选项*/"strict":true,//启用所有严格类型检查选项"noImplicitAny":true,//在表达式和声明上有隐含的any类型时报错"strictNullChecks":true,//启用严格的null检查"noImplicitThis":true,//当this表达式值为any类型的时候，生成一个错误"alwaysStrict":true,//以严格模式检查每个模块，并在每个文件里加入'usestrict'/*额外的检查*/"noUnusedLocals":true,//有未使用的变量时，抛出错误"noUnusedParameters":true,//有未使用的参数时，抛出错误"noImplicitReturns":true,//并不是所有函数里的代码都有返回值时，抛出错误"noFallthroughCasesInSwitch":true,//报告switch语句的fallthrough错误。（即，不允许switch的case语句贯穿）/*模块解析选项*/"moduleResolution":"node",//选择模块解析策略：'node'(Node.js)or'classic'(TypeScriptpre-1.6)"baseUrl":"./",//用于解析非相对模块名称的基目录"paths":{},//模块名到基于baseUrl的路径映射的列表"rootDirs":[],//根文件夹列表，其组合内容表示项目运行时的结构内容"typeRoots":[],//包含类型声明的文件列表"types":[],//需要包含的类型声明文件名列表"allowSyntheticDefaultImports":true,//允许从没有设置默认导出的模块中默认导入。/*SourceMapOptions*/"sourceRoot":"./",//指定调试器应该找到TypeScript文件而不是源文件的位置"mapRoot":"./",//指定调试器应该找到映射文件而不是生成文件的位置"inlineSourceMap":true,//生成单个soucemaps文件，而不是将sourcemaps生成不同的文件"inlineSources":true,//将代码与sourcemaps生成到一个文件中，要求同时设置了--inlineSourceMap或--sourceMap属性/*其他选项*/"experimentalDecorators":true,//启用装饰器"emitDecoratorMetadata":true//为装饰器提供元数据的支持}}