vue-cli在打包时,会将process.env.XXX进行替换
关于环境变量如何定义:
- 首先读取当前机器的环境变量
- 读取.env文件
开发环境读取 .env 和 .env.developent 文件。 生产环境读取 .env 和 .env.production 文件
普通的环境变量不会被替换
下面三种可以被替换
-
NODE_ENVvue会进行处理 -
BASE_URL -
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
当网站布置在子路径的时候,需要在子路径下访问资源,可以按照下面的方式去做
上面的用下面的更好,就是说配置的publicPath 能通过 process.env.BASE_URL获取到
上面的方式加了 /news是所有的资源(css,js)都会加上上面的路径,上面默认是/;
而路由需要下面的配置
而下图中原来配置的路由不需要修改
babel配置
写到项目根目录下的babel.config.js中
ESLint
ESLint 可以通过 .eslintrc 或 package.json 中的 eslintConfig 字段来配置。
postcss
写到postcss.config.js