.env vue.config.js
这一章主要环境相关配置
开发环境与线上环境配置
下面是vue cli 配置模式和环境变量： 模式和环境变量
vue-cli 3.0x与vue-cli 2.0x最主要的区别是项目结构目录精简化，这也带来了许多问题，很多配置需要自己配置，
由于2.0x版本中直接在config/文件夹下面配置开发环境与线上环境，3.0x则需要自己配置。
首先配置开发环境，在项目根目录下新建三个文件，如果有测试环境还可以再加一个。
属性名必须以VUE_APP_开头，比如VUE_APP_XXX 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中， NODE_ENV 和 BASE_URL 是两个特殊变量，在代码中始终可用
vue3.0 .env 文件配置全局环境变量
在根目录下创建以下文件
代码语言：javascript复制.env 全局默认，任何环境都加载合并
.env.development 开发环境下的配置文件
.env.production 生产环境下的配置文件 .env.development 内容写
代码语言：javascript复制NODE_ENV="development" //开发环境
BASE_URL="http://localhost:3000/" //开发环境接口地址.env.production 线上环境
代码语言：javascript复制NODE_ENV="production" //生产环境
BASE_URL="url" //生产环境的地址现在我们如何在项目中判断当前环境呢？ 我们可以根据process.env.BASE_URL来获取它是线上环境还是开发环境，下一章中会有运用
代码语言：javascript复制 if(process.env.NODE_ENV='development'){
console.log( process.env.BASE_URL) // http://localhost:3000/
}else{
console.log( process.env.BASE_URL) // url
}只在本地有效的变量
有的时候你可能有一些不应该提交到代码仓库中的变量，尤其是当你的项目托管在公共仓库时。 这种情况下你应该使用一个 .env.local 文件取而代之。本地环境文件默认会被忽略，且出现在 .gitignore 中。
.local 也可以加在指定模式的环境文件上，比如 .env.development.local 将会在 development 模式下被载入，且被 git 忽略。
vue.config.js配置
2.x里面webpack相关的配置项直接在项目的build/webpack.base.conf.js里面配置，而3.x完全在vue.config.js中配置
创建vue.config.js
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
由于项目初始化的时候没有vue.config.js配置文件，因此我们需要在项目根目录下新建一个vue.config.js配置项。
配置具体参数可以参考： 配置参考
这个项目主要是配置三个东西，第一个就是目录别名alias，另一个是项目启动时自动打开浏览器，最后一个就是处理css。
webpack 相关
代码语言：javascript复制const path = require("path");
const resolve = dir => path.join(__dirname, dir);
module.exports = {
chainWebpack: config => {
//设置别名
config.resolve.alias
.set('@',resolve('src'))
},
devServer: {
open:true //打开浏览器窗口
},
css: {
loaderOptions: {
css: {
// 这里的选项会传递给 css-loader
},
}
}
}更多配置项参考
vue-cli4的配置vue.config.js
更多配置项
代码语言：javascript复制'use strict'
module.exports = {
publicPath: './', //基本路径
outputDir: 'dist', //构建时的输出目录
assetsDir: 'static',//放置静态资源的目录
indexPath: 'index.html',//html 的输出路径
filenameHashing: true,//文件名哈希值
lintOnSave: true,//是否在保存的时候使用 `eslint-loader` 进行检查。
//组件是如何被渲染到页面中的？ （ast：抽象语法树；vDom：虚拟DOM）
//template ---> ast ---> render ---> vDom ---> 真实的Dom ---> 页面
//runtime-only：将template在打包的时候，就已经编译为render函数
//runtime-compiler：在运行的时候才去编译template
runtimeCompiler: false,
transpileDependencies: [],//babel-loader 默认会跳过 node_modules 依赖。
productionSourceMap: false,//是否为生产环境构建生成 source map？
//调整内部的 webpack 配置
configureWebpack:: () => {},
chainWebpack: () => {},
// 配置 webpack-dev-server 行为。
devServer: {
open: true, //编译后默认打开浏览器
host: '0.0.0.0', //域名
port: 8080, // 端口
https: false, //是否https
//显示警告和错误
overlay: {
warnings: false,
errors: true
},
proxy: {
'/api': {
target: 'http://asoyy.xyz',
changeOrigin: true, //是否跨域
ws: false, //是否支持websocket
secure: false, //如果是https接口，需要配置这个参数
pathRewrite: {
'^/api': ''
}
}
}
}
}添加别名alias
代码语言：javascript复制const path = require("path");
const resolve = dir => path.join(__dirname, dir);
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set("vue$", "vue/dist/vue.esm.js")
.set("@", resolve("src"))
.set("@assets", resolve("src/assets"))
.set("@components", resolve("src/components"))
.set("@views", resolve("src/views"))
.set("@router", resolve("src/router"))
.set("@store", resolve("src/store"));
}
};其他
关于sass（scss）、less、postcss、stylus等的用法与区别
CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。
参考
从0到1搭建Element的后台框架
