42.环境变量相关

176 阅读1分钟

image-20210323134742034

vue-cli在打包时,会将process.env.XXX进行替换

关于环境变量如何定义:

  1. 首先读取当前机器的环境变量
  2. 读取.env文件

image.png

开发环境读取 .env 和 .env.developent 文件。 生产环境读取 .env 和 .env.production 文件

普通的环境变量不会被替换

下面三种可以被替换

  1. NODE_ENV vue会进行处理

  2. BASE_URL

  3. VUE_APP_XXX = 1

VUE_APP_ABC = 1 这样类型的变量会被替换

所有配置参考:vue-cli 配置

vue.config.js

  • devServer
  • publicPath
  • outputDir 配置输出目录
  • runtimeCompiler 运行是编译,默认情况下不需要,一般是有个预编译,在打包前编译了。如果你需要在运行时编译,会增大包的体积
  • transpileDependencies 默认情况不会对node_Modules里面的库进行降级处理,因为第三方库一般都做过降级处理了
  • configureWebpack webpack相关配置
  • css.requireModuleExtension 默认是没有开启css module,只会对 .module.css/less 这些开启css module,可以设置module可以对所有的css文件开启 css module 配置。

publicPath

当网站布置在子路径的时候,需要在子路径下访问资源,可以按照下面的方式去做

image.png

上面的用下面的更好,就是说配置的publicPath 能通过 process.env.BASE_URL获取到 image.png

image.png

上面的方式加了 /news是所有的资源(css,js)都会加上上面的路径,上面默认是/; 而路由需要下面的配置 image.png

而下图中原来配置的路由不需要修改 image.png

babel配置

写到项目根目录下的babel.config.js

ESLint

ESLint 可以通过 .eslintrcpackage.json 中的 eslintConfig 字段来配置。

postcss

写到postcss.config.js