VUE3照本宣科——package.json与vite.config.js

*长铗归来*

已于 2023-10-23 13:41:50 修改

阅读量1.9k

点赞数

分类专栏： VUE 文章标签： Vue 前端开发语言

于 2023-10-06 20:07:43 首次发布

本文链接：https://blog.csdn.net/mlw519/article/details/133592147

版权

VUE 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文详细介绍了VUE3项目中的package.json配置，包括名称、版本、私有设置和脚本，以及vite.config.js的插件、别名、base和mode配置。同时涵盖了eslint、prettier等工具的使用。

摘要由CSDN通过智能技术生成

VUE3照本宣科系列导航

1.VUE3照本宣科——认识VUE3
2.VUE3照本宣科——应用实例API与setup
3.VUE3照本宣科——响应式与生命周期钩子
4.VUE3照本宣科——内置指令与自定义指令及插槽
5.VUE3照本宣科——路由与状态管理器
6.VUE3照本宣科——eslint与prettier
7.VUE3照本宣科——package.json与vite.config.js

前言

👨‍💻👨‍🌾📝记录学习成果，以便温故而知新

“VUE3照本宣科”是指照着中文官网和菜鸟教程这两个“本”来学习一下VUE3。以前也学过VUE2，当时只在gitee留下一些代码，却没有记录学习的心得体会，有时也免不了会追忆一下。

以后出现“中文官网”不做特殊说明就是指：https://cn.vuejs.org/；菜鸟教程就是指：https://www.runoob.com/vue3/vue3-tutorial.html

一、package.json

写本专题时，上网搜了“package.json”，一开始先入为主的以为是VUE的东西，上VUE的官网去找，结果没找到；然后觉得是node.js的东西，又上node官网去找，结果是“两处茫茫皆不见”。偶然在网友的文章中看到是npm的东西，然后就找到了npm Docs，里面有关于package.json的介绍。

一来由于是纯英文的介绍，二来是因为内容比较多，所以就只挑zbxk项目中涉及的介绍一下。zbxk项目中package.json文件内容：

{
  "name": "zbxk",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "pinia": "^2.1.6",
    "vue": "^3.3.4",
    "vue-router": "^4.2.4"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.3.3",
    "@vitejs/plugin-vue": "^4.3.4",
    "@vue/eslint-config-prettier": "^8.0.0",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "prettier": "^3.0.3",
    "vite": "^4.4.9"
  }
}

1.name

文档上写得很啰嗦，可以认为是项目名称。
另外名称必须小于等于214字符，小写，不得以.或下划线开头，可以作为url的一部分。

2.version

项目版本。

3.private

如果是私有项目，不希望发布到公共 npm 仓库上，可以将 private 设为 true。

4.scripts

指定项目的一些内置脚本命令，这些命令可以通过 npm run 来执行。

在集成开发环境的“资源管理器”的“NPM脚本”会显示这些脚本命令，如下图：
在这里插入图片描述

5.dependencies

运行依赖，也就是项目生产环境下需要用到的依赖。

6.devDependencies

开发依赖，项目开发环境需要用到而运行时不需要的依赖，用于辅助开发，通常包括项目工程化工具比如 eslint、prettier与vite等。

其它配置项详情请参看npm Docs官网https://docs.npmjs.com/cli/v10/configuring-npm/package-json#scripts，这里就不啰嗦了。

二、vite.config.js

vite.config.js是vite构建工具的配置文件。Vite 官方中文文档地址https://cn.vitejs.dev/。

zbxk项目中vite.config.js文件内容：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

1.plugins

需要用到的插件数组。Falsy 虚值的插件将被忽略，插件数组将被扁平化（flatten）。

2.resolve.alias

当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会原封不动地被使用，因此无法被正常解析。

以上是对zbxk项目使用到的配置项的说明。

3.base

开发或生产环境服务的公共基础路径，base的类型是string，默认值“/”。合法的值包括以下几种：

绝对 URL 路径名，例如 /foo/
完整的 URL，例如 https://foo.com/
空字符串或 ./（用于嵌入形式的开发）

重点看一下对编译后index.html的影响。zbxk的默认vite.config.js配置生成的内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <script type="module" crossorigin src="/assets/index-84d03148.js"></script>
    <link rel="stylesheet" href="/assets/index-499625e2.css">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

vite.config.js加上：

base: './',

后编译生成的内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="./favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <script type="module" crossorigin src="./assets/index-9a6c1f67.js"></script>
    <link rel="stylesheet" href="./assets/index-499625e2.css">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

可以看出引用资源的地方由“/”变成了“./”。

4.mode

类型是string，默认 ‘development’ 用于开发，‘production’ 用于构建。

在配置中指明将会把 serve 和 build 时的模式都覆盖掉。也可以通过命令行 --mode 选项来重写。

如下图在项目根目录分别建3个文件：
在这里插入图片描述

（1）.env

文件内容：

VITE_URL=http://www.baidu.com

（2）.env.development

文件内容：

VITE_SOME_KEY=123
DB_PASSWORD=123456

（3）.env.production

文件内容：

VITE_SOME_KEY=456
DB_PASSWORD=123456

测试代码：

onMounted(() => {
  console.log(import.meta.env.VITE_URL)
  console.log(import.meta.env.VITE_SOME_KEY)
  console.log(import.meta.env.DB_PASSWORD)
})

当为’development’时，控制台输出：
在这里插入图片描述
当为’production’时，控制台输出：

这说明mode可以控制环境变量的引用。从两张截图可以DB_PASSWORD实重没有引用到，这是因为文档里说了只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。