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

2023-12-06 14:10:40

环境变量 .env文件

访问

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

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

.env文件

VUE_APP_URL = 127.0.0.1:9088

从控制台可以看到，process.env是一个对象，BASE_URL 和 NODE_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，会直接将错误显示在浏览器中，同时项目编译错误；设置为true 或 warning 错误会输出到命令行里（你运行启动命令时会看到），项目不会编译失败

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?

注释要用#开头

码农公寓

环境变量 .env文件

vue.config.js

package.json

package-lock.json

.gitignore

相关文章