Vue项目中的配置及配置文件

环境变量 .env文件

访问

现在的前端项目都是用 Node 来作为辅助开发工具,而 process 是 Node.js 中的 一个全局变量,提供来有关当前 Node.js 进程的信息并对其进行控制。而 process 中的 env 则是返回包含用户环境的对象。
通俗点说,就是可以通过 process.env 拿到当前项目运行环境的信息。


console.log("环境变量:",process.env)

.env文件

VUE_APP_URL = 127.0.0.1:9088

Vue项目中的配置及配置文件
从控制台可以看到,process.env是一个对象,BASE_URLNODE_ENV属性是默认属性,比较常用的是NODE_ENV 用来判断当前的环境

文件名

项目中env文件挺多的,常见的有.env.env.local.env.development.env.production

  • .env 在所有环境中被载入
  • .env.local 在所有的环境中被载入,但会被git忽略
  • .env.[mode] 在指定的环境被载入,比如.env.development 开发环境中被载入
  • .env.[mode].local 在指定的模式中被载入,但是会被git忽略

一般开发时修改一些东西,比如ajax请求地址,在.env.local里进行修改

定义属性,及注释

属性名必须以VUE_APP_开头,比如 VUE_APP_PROJECT_NAME
注释必须是 # 开头,后面跟要注释的内容

文件加载

这么多的文件,那项目启动时会加载哪一个文件?这个与启动命令有关,可以看一下package.json文件

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

当你运行npm run serve 会加载.env文件。通过--mode 可以修改,比如上面的--mode prod当你运行npm run serve-prod时就会加载.env.prod文件

加载顺序

.env 文件会被所有环境加载,但是有一个加载顺序

.env.[mode].local > .env.[mode] > .env.local > .env 

正常情况下,会加载.env文件,如果有.env.local文件就会优先加载,这是我们开发时使用的。对于特殊文件,一般是发布到线上(其他人可以通过网络访问到)时用到,通过不同的打包命令,来决定发布到线上的应用加载的是那个文件

vue.config.js

具体配置项查看官网内容:传送门

改文件应该导出一个包含了选项的对象:

module.exports = {
  // 选项...
}

常用配置项如下:

publicPath
部署应用包时的基本 URL。默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上例如 https://www.my-app.com/。
如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 publicPath 为 /my-app/。
这个值也可以被设置为空字符串 (’’) 或是相对路径 (’./’),这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径
看了一下公司的一个子项目,使用的是./

outputDir
指定打包输出目录,默认dist

assetsDir

放置打包后静态文件的输出目录,默认'',一般用static/

indexPath

指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。默认为index.html
打包后.vue文件,js文件等会进行处理最终会注入到index.html文件中

filenameHashing
生成文件的hash值。
默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而,这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML,你可以通过将这个选项设为 false 来关闭文件名哈希。

pages
构建多页面应用时使用,vue项目是单页面应用,正常情况下都是

 pages: undefined,

lintOnSave
文件保存时是否进行语法校验。默认default,会直接将错误显示在浏览器中,同时项目编译错误;设置为truewarning 错误会输出到命令行里(你运行启动命令时会看到),项目不会编译失败

runtimeCompiler

是否使用包含运行时编译器的Vue核心的构建,默认false

devServer
webpack-dev-server 相关配置
比如:

devServer: {
    host: "127.0.0.1", // 服务器的主机IP
    port: 10000, // 端口
    open: false, // 项目运行时自动在浏览器打开
    hotOnly: false, //  构建失败时回退
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
    proxy: {
      // 设置代理
      "/api": {
        // 请求地址
        target: `http://${process.env.VUE_APP_URL}`,
        // 替换 'api' 为 "/"
        pathRewrite: {
          "^/api": "",
        },
        // 允许跨域请求
        changeOrigin: true,
      },
    },
  },

devServer.proxy
如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。

chainWebpack
是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改,你可以定义具名的 loader 规则和具名插件

package.json

官方文档:传送门

常用属性如下:一般是用来描述npm包的信息,在vue项目里理解为项目所依赖的相关信息就行

  • name 包名
  • version 版本号
  • description 描述信息
  • keywords 关键信息
  • homepage 包的主页地址
  • author 作者
  • main 包的入口文件
  • scripts 设置可以使用npm调用的一些命令脚本
  • private 是否是私用,true表示私有,不会被发布到npm平台下
  • dependencies 指定依赖的其它包,这些依赖是指包发布后正常执行时所需要的,也就是线上需要的包。使用下面的命令来安装
npm install --save packageName
  • devDependencies 这些依赖只有在开发时候才需要。使用下面的命令来安装
npm install --save-dev packageName 

package-lock.json

package-lock.json记录了node_modules目录下所有模块的具体来源和版本号以及其他的信息。

.gitignore

用于记录那些文件在git提交时不会被提交到仓库,例如

.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

注释要用#开头

上一篇:Github Action报错Error: Unable to process file command 'env' successfully.


下一篇:在Matlab 上使用 Reinforcement learning