前端模块化

Nie_XiaoGang

已于 2024-09-02 22:33:56 修改

阅读量347

点赞数

分类专栏：模块化文章标签：前端 javascript vue.js

于 2022-08-08 23:34:28 首次发布

本文链接：https://blog.csdn.net/Nie_XiaoGang/article/details/126237186

版权

模块化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是模块化

将程序代码按照一定的规则拆分为多个文件，这种编码方式就是模块化编码方式
拆分出来的每一个文件就是一个模块，模块中的数据都是私有的，模块之间是相互隔离的
也可以通过一些方法将模块中的数据抛出去，供其他模块使用

解决的问题

全局污染
依赖混乱
数据安全

ES6模块化

ES6模块规范定义

每一个js文件都是独立的模块
暴露模块成员使用export关键字
导入模块成员使用import关键字

暴露模块成员

一个模块中可以同时使用默认导出和按需导出,如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象
默认导出: 一个模块中默认导出只能使用一次

const num = 123;
const obj = {'a', 'b'}
export default {
	num,
	obj
}

按需导出: 按需导出可以多次使用

export const num = 123;
export const obj = { 'a', 'b'};
export function fn = function() {};

默认导出和按需导出同时使用

const num = 123;
const num2 = 456;
export function fn() {};
export default {
	num2,
	num
}

导入模块成员

默认导入

// import 导入名称 from '模块标识符'	. 导入名称可以自定义名称
import test from "./test.js"

按需导入

// import 导入名称 from '模块标识符'	. 
// 导入名称为导出名称,也可以使用as关键字取别名
import { num, obj as newObj } from "./test.js"

导入全部

// 一次性全部导入模块的所有变量就可以使用    * as 代表全部(包含默认导出对象和所有按需导出对象)
import * as newObj from "./test.js"

默认导入和按需导入同时使用

import num, { num2 as newNum2, fn} from "./test"

CommonJS 规范 (服务器端模块化)

node.js是CommonJS的主要实践者，它有四个重要的环境变量：module, exports, require, Global
module.exports: 定义模块对外输出的接口，
require: 用于加载模块

导出

// test.js
const a = 'aa',
const b = 'bb'
// 单个导出
exports.a = a
// 批量导出
module.exports = {
	a, b
}

导入

const obj = require('test.js')
console.log(obj)	// => { a: 'aa', b: 'bb'}

node常用命令

node -v			// 查看版本号
mkdir 文件夹名	// 创建文件夹
cd	文件路径	// 切换文件路径
node js文件名	// 运行js文件
esc键			// 清除当前命令行
cls 			// 清空当前终端

搭建一个本地服务器

创建一个文件my_server用于存放node服务器
使用终端打开my_server文件夹，运行npm init -y初始化包
npm i express安装express框架
建一个存放静态文件的文件夹dist，用于存放前台打包后的文件
创建一个app.js文件，搭建本地服务器，执行前台代码

// 导入express框架
const express = require('express')
// 创建express实例
const app = express()

const students = [
	{ name: '张三丰', id: 1 },
	{ name: '张无忌', id: 2 },
	{ name: '张翠山', id: 3 },
]
// 处理预检请求
app.options('/students', (req, res) => {
  // 设置允许的请求源
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5173')
  // 设置允许的请求方式
  res.setHeader('Access-Control-Allow-methods', 'GET, POST')
  // 设置允许的请求头
  res.setHeader('Access-Control-Allow-Headers', 'token')
  // 设置预检请求的缓存时间（可选）
  res.setHeader('Access-Control-Max-Age', 7200)
  res.send()
})

// 处理实际请求
app.get('/students', (req, res) => {
  // 设置允许的请求源
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5173')
  // 设置自定义响应头
  res.setHeader('abc', '123')
  // 设置允许暴露给客户端的响应头
  res.setHeader('Access-Control-Expose-Headers', 'abc')
  res.send(students)
})

// 指定静态文件
app.use(express.static('./dist'))
// 开启本地服务器
app.listen(8090,() => {
	console.log('http://localhost:8090')
})

npm包管理工具

npm -v				    // 查看版本号
npm install 文件名		// 安装包,默认安装到项目依赖
npm install 文件名 -D	// 安装包,安装到开发依赖
npm install 文件名 -g 	// 安装全局包
npm uninstall 文件名	// 删除安装包
npm list -g --depth 0	// 查看全局包列表
npm init -y		// 创建 package.json 文件，记录安装的包
npm i 			// 一次安装package.json中的所有包

grunt/gulp

更强调前端流程的自动化，模块化不是他的核心

webpack 前端模块化打包工具

Webpack 是一个静态资源打包工具。它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器段运行了。

开发模式：编译代码，让浏览器能识别。开发时我们有样式资源、字体资源、图片资源、html资源等，webpack只能识别js文件，不能处理这些资源，所以我们要配置各种loader加载器来编译这些资源
生产模式：优化代码运行性能，打包速度

准备工作

// 初始化package.json
npm init -y

// 安装webpack
npm i webpack webpack-cli -D

// 此时已经可以指定入口文件打包了，后面在webpack.config.js中配置入口文件、mode模式后，直接使用npx webpack 打包
// 开发模式 打包
npx webpack ./src/main.js --mode=development
// 生产模式 打包
npx webpack ./src/main.js --mode=production

安装webpack-dev-server后使用npx webpack serve启动服务

npm i webpack-dev-server -D

在webpack.config.js中配置devServer后，使用npx webpack serve启动编译，之后修改文件会自动编译

// 开发服务器,不会输出资源，在内存中编译打包的(相当于只是启动服务，没有输出打包文件)
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    // 开启代理，接手客户端请求转发给服务器
    proxy: {
		// 已/api开头的接口会走这里
			'/api': {
				target: 'http://10.234.99.80:8090',		// 目标地址
				changeOrigin: true,		// 它表示是否更新代理后请求的 headers 中host地址
				pathRewrite: {
					// 重写，使用‘/api’代理‘/api/request1’接口
					'^\/api': ''
				}
			}
	}
  },

webpack基础配置

新建一个webpack.config.js文件，用来配置webpack。
webpack配置的核心模块：

mode（模式）：开发模式、生产模式
entry（入口）：指定入口文件
output（输出）：指定输出文件目录
module（loader加载器）：安装各种loader来编译webpack不能识别的模块，运行在打包之前
plugins（插件）：安装各种打包插件来优化打包文件，解决loader处理不了的事，运行在整个编译过程

const path = require('path'); // nodejs核心模块，专门用来处理路径问题
const HtmlWebpackPlugin = require('html-webpack-plugin');		// html模板插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');	// 提取css插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");	// 压缩css插件
module.exports = {
	// 模式
	mode: 'development',
	// 入口,相对路径
	entry: './src/main.js',
	// 输出
	output: {
		// 打包后文件输出路径，绝对路径
		// __dirname nodejs的变量，代表当前文件的文件夹目录
		path: path.resolve(__dirname, 'dist'),
		// 文件名,入口文件输出文件目录
		filename: 'static/js/main.js',
		// 打包前将之前的打包文件清除
		clean: true,
	},
	// 开发服务器,不会输出资源，在内存中编译打包的
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: false, // 是否自动打开浏览器
  },
  // 加载器
	module: {
		rules: [
			// loader配置
			{
				test: /\.css$/i, // 只检测.css结尾的文件
				// loader从右往左或从下往上执行
				use: [
					//'style-loader', // 将js中的css通过创建style标签添加到html中失效
					MiniCssExtractPlugin.loader, // 将css从js中单独提取出来
					'css-loader', // 将css资源编译成common.js模块到js中
					{	// 解决css在浏览器的兼容问题
						loader: 'postcss-loader',
						options: {
							postcssOptions: {
								plugins: [
									'postcss-preset-env', // 能解决大多数样式兼容性问题
								],
							},
						},
					},
				],
			},
			{
				test: /\.less$/i, // 只检测.less结尾的文件
				use: [
					// 'style-loader',
					MiniCssExtractPlugin.loader, // 将css从js中单独提取出来
					'css-loader',
					{
						loader: 'postcss-loader',
						options: {
							postcssOptions: {
								plugins: [
									'postcss-preset-env', // 能解决大多数样式兼容性问题
								],
							},
						},
					},
					'less-loader', // 将less文件编译成css文件
				],
			},
			{
				test: /\.scss$/i, // 只检测.scss结尾的文件
				use: [
					// 'style-loader',
					MiniCssExtractPlugin.loader, // 将css从js中单独提取出来
					'css-loader',
					{
						loader: 'postcss-loader',
						options: {
							postcssOptions: {
								plugins: [
									'postcss-preset-env', // 能解决大多数样式兼容性问题
								],
							},
						},
					},
					'sass-loader', // 将scss文件编译成css文件
				],
			},
			{
				test: /\.(png|svg|jpg|jpeg|gif)$/i,
				type: 'asset',
				parser: {
					dataUrlCondition: {
						// 小于60kb的图片转成base64
						// 缺点：增加图片体积，优点：减少请求次数
						maxSize: 60 * 1024, // 4kb
					},
				},
				generator: {
					// 输出图片名称，hash:10, hash值取前10位
					filename: 'static/images/[hash:10][ext][query]',
				},
			},
			{
				// 打包字体图标及其他资源，原封不动的输出
				test: /\.(ttf|woff2?|mp3|mp4)$/i,
				type: 'asset/resource',
				generator: {
					// 输出图片名称，hash:10, hash值取前10位
					filename: 'static/media/[hash:10][ext][query]',
				},
			},
			{
				test: /\.js$/,
				// exclude: /node_modules/,  // 排除node_modules文件
        		include: path.resolve(__dirname, 'src'),	// 只处理src下的文件
        		loader: 'babel-loader',
        		// options: {
		        //   presets: ['@babel/preset-env'],
        		// },
			},
		],
	},
	// 插件
	plugins: [
		// plugin的配置
		new HtmlWebpackPlugin({
		// 以 public/index.html 为模板创建文件
      	// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      		template: path.resolve(__dirname, "public/index.html"),
		}),
		// 将css从js文件中提取到单独的文件
		new MiniCssExtractPlugin({ filename: 'static/css/main.css' }),
		// 压缩css
		new CssMinimizerPlugin()
	],
}

webpack优化配置

安装mini-css-extract-plugin插件，从js中将css代码提取出来为单独的css文件。

// 安装并导入 提取css插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');	
// 使用插件
module.exports = {
	// 使用 MiniCssExtractPlugin.loader 替换 style-loader
	module: {
		rules: [
			// loader配置
			{
				test: /\.css$/i, // 只检测.css结尾的文件
				// loader从右往左或从下往上执行
				use: [
					//'style-loader', // 将js中的css通过创建style标签添加到html中失效
					MiniCssExtractPlugin.loader, // 将css从js中单独提取出来
					'css-loader', // 将css资源编译成common.js模块到js中
				],
			},
		]
	}
	plugins: [
		// 使用提取css的插件，并配置打包输出目录
		new MiniCssExtractPlugin ({
			filename: 'static/css/main.css'
		})
	]
}

安装css-minimizer-webpack-plugin插件，用来压缩打包生成的css文件

// 安装并导入 压缩css插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");	
// 使用插件
module.exports = {
	plugins: [
		// 使用压缩css的插件
		new CssMinimizerPlugin()
	]
}

使用postcss-loader配置css的兼容性

// 下载依赖 
npm i postcss-loader postcss postcss-preset-env -D
// 配置
module.exports = {
	// 加载器
	module: {
		rules: [
			// loader配置
			{
				test: /\.css$/i, // 只检测.css结尾的文件
				// loader从右往左或从下往上执行
				use: [
					//'style-loader', // 将js中的css通过创建style标签添加到html中失效
					MiniCssExtractPlugin.loader, // 将css从js中单独提取出来
					'css-loader', // 将css资源编译成common.js模块到js中
					{	// 解决css在浏览器的兼容问题
						loader: 'postcss-loader',
						options: {
							postcssOptions: {
								plugins: [
									'postcss-preset-env', // 能解决大多数样式兼容性问题
								],
							},
						},
					},
				],
			},
		]
	}
}

browserslist：配置需要兼容浏览器的范围

"browserslist": [
    "last 2 version",
    "> 1%",
    "not dead"
  ]

将体积小的图片资源转换为base64格式，减少http请求，缺点增加了图片体积

module.exports = {
	// 加载器
	module: {
		rules: [
			{
				test: /\.(png|svg|jpg|jpeg|gif)$/i,
				type: 'asset',
				parser: {
					dataUrlCondition: {
						// 小于60kb的图片转成base64
						// 缺点：增加图片体积，优点：减少请求次数
						maxSize: 60 * 1024, // 4kb
					},
				},
				generator: {
					// 输出图片目录及名称，hash:10, hash值取前10位
					filename: 'static/images/[hash:10][ext][query]',
				},
			},
		]
	}
}

SourceMap（源代码映射）

module.exports = {
	// SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。
	// cheap-module-source-map 打包编译速度快，只包含行映射，没有列映射
	devtool: "cheap-module-source-map",
	// source-map 包含行/列映射,打包编译速度慢,一般用在生产模式
	devtool: "source-map",
}

HMR热模块替换功能

module.exports = {
	// 开发服务器,不会输出资源，在内存中编译打包的
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: false, // 是否自动打开浏览器
	hot: true, // 开启HMR热模块替换功能（只能用于开发环境，生产环境不需要了）
  },
}

oneOf让被打包文件只会命中一个loader

module.exports = {
	module: {
		rules: [
			{
				// 让每个被打包文件只命中一个loader,后面的就不走了
				oneOf: [
					{
						test: /\.(png|svg|jpg|jpeg|gif)$/i,
						type: 'asset',
						parser: {
							dataUrlCondition: {
								// 小于60kb的图片转成base64
								// 缺点：增加图片体积，优点：减少请求次数
								maxSize: 60 * 1024, // 4kb
							},
						},
						generator: {
							// 输出图片目录及名称，hash:10, hash值取前10位
							filename: 'static/images/[hash:10][ext][query]',
						},
					},
				]
			}
		]
	}
}

exclude/include排除或包含要编译的文件

module.exports = {
	module: {
		rules: [
			{
				test: /\.js$/,
				// exclude: /node_modules/,	// 排除node_modules文件不编译
				include: path.resolve(__dirname, '../src'),	// 只处理src下的文件
				loader: 'babel-loader',
			},
		]
	}
}

cache开启babel编译缓存,安装babel的插件减少babel输出文件体积

// 安装babel插件
npm i @babel/plugin-transform-runtime -D

module.exports = {
	module: {
		rules: [
			{
				test: /\.js$/,
				// exclude: /node_modules/,	// 排除node_modules文件不编译
				include: path.resolve(__dirname, '../src'), // 只处理src下的文件
				use: [
						{
							loader: 'babel-loader',
							options: {
								cacheDirectory: true, // 开启babel编译缓存
								cacheCompression: false, // 缓存文件不要压缩
								plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
							},
						},
				],
			},
		]
	}
}

开启多进程打包和压缩

// nodejs模块，计算cpu数量
const os = require("os")
const threads = os.cpus().length
// 安装并导入js压缩插件
const TerserPlugin = require('terser-webpack-plugin'); 

module.exports = {
	module: {
		rules: [
			{
				test: /\.js$/,
				// exclude: /node_modules/,	// 排除node_modules文件不编译
				include: path.resolve(__dirname, '../src'), // 只处理src下的文件
				use: [
						{
							loader: 'thread-loader',	// 开启多进程打包
							options: {
                  				workers: threads, // 数量
                			},
                		}
				],
			},
		]
	},
	plugins: [
		new TerserPlugin({
        	parallel: threads // 开启多进程压缩
      	})
	]
}

webpack高级配置

配置多入口打包，提取重复代码分割到公共的js模块

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
	mode: "prodution",
	//entry: "./src/main.js",		//一个入口文件
	entry: {
		// 有多个入口文件
		app: "./src/app.js",
		main: "./src/main.js"
	},
	output: {
		path: path.resolve(__diename, "dist"),
		filename: "[name].js",	// webpack命名方式，[name]以文件名自己命名
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: path.resolve(__dirname, "public/index.html")
		})
	],
	optimization: {
    	// 代码分割配置
    	splitChunks: {
      		chunks: "all", // 对所有模块都进行分割
      		// 以下是默认值
      		// minSize: 20000, // 分割代码最小的大小
      		// minRemainingSize: 0, // 类似于minSize，最后确保提取的文件大小不能为0
      		// minChunks: 1, // 至少被引用的次数，满足条件才会代码分割
      		// maxAsyncRequests: 30, // 按需加载时并行加载的文件的最大数量
      		// maxInitialRequests: 30, // 入口js文件最大并行请求数量
      		// enforceSizeThreshold: 50000, // 超过50kb一定会单独打包（此时会忽略minRemainingSize、maxAsyncRequests、maxInitialRequests）
      		// cacheGroups: { // 组，哪些模块要打包到一个组
      		//   defaultVendors: { // 组名
      		//     test: /[\\/]node_modules[\\/]/, // 需要打包到一起的模块
      		//     priority: -10, // 权重（越大越高）
      		//     reuseExistingChunk: true, // 如果当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用，而不是生成新的模块
      		//   },
      		//   default: { // 其他没有写的配置会使用上面的默认值
      		//     minChunks: 2, // 这里的minChunks权重更大
      		//     priority: -20,
      		//     reuseExistingChunk: true,
      		//   },
      		// },
      		// 修改配置
      		cacheGroups: {
        		// 组，哪些模块要打包到一个组
        		// defaultVendors: { // 组名
        		//   test: /[\\/]node_modules[\\/]/, // 需要打包到一起的模块
        		//   priority: -10, // 权重（越大越高）
        		//   reuseExistingChunk: true, // 如果当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用，而不是生成新的模块
        	// },
        		default: {
          		// 其他没有写的配置会使用上面的默认值
          		minSize: 0, // 我们定义的文件体积太小了，所以要改打包的最小文件体积
          		minChunks: 2,
          		priority: -20,
          		reuseExistingChunk: true,
        	},
      	},
    },
  },
}

Network Cache
将来开发时我们对静态资源会使用缓存来优化，这样浏览器第二次请求资源就能读取缓存了，但是发布新版本文件名没有变就不会加载新资源
contenthash：根据文件内容生成 hash 值，只有文件内容变化了，hash 值才会变化。所有文件 hash 值是独享且不同的。

module.exports = {
	// 输出
	output: {
		// 打包后文件输出路径，绝对路径
		// __dirname nodejs的变量，代表当前文件的文件夹目录
		path: path.resolve(__dirname, '../dist'),
		// contenthash 根据文件内容生成 hash 值，只有文件内容变化了，hash 值才会变化。所有文件 hash 值是独享且不同的。
		// [contenthash:8]使用contenthash，取8位长度
		// 文件名,入口文件输出文件目录
		filename: 'static/js/[name].[contenthash:8].js',
		// 统一给动态导入输出的文件命名，加.chunk与主文件区分
		chunkFilename: "static/js/[name].[contenthash:8].chunk.js",
		// 统一给图片、字体等资源命名方式（注意用hash）
		assetModuleFilename: 'static/media/[hash:10][ext][query]',
		// 打包前将之前的打包文件清除
		clean: true,
	},
}

`Vue CLI`

vue-cli 创建项目

Vue脚手架可以快速创建Vue项目基础架构
使用脚手架创建项目需要先安装node和vue/cli

// 打开cmd，查看@vue/cli版本号，构建vue3项目@vue/cli版本需在4.5.0以上
vue --version
// 安装全局脚手架: 
npm install @vue/cli@版本号 -g

1>. 使用命令创建Vue项目
创建: vue create my-project
选择Manually select features(选择特性以创建项目),
勾选需要的特性, 可以用空格进行勾选。
选择Vue.js版本
是否选用history模式的路由：n
选择css加载器: less或者sass, sass常会由于网络和版本问题安装失败
ESLint选择: ESLint + Prettier
选择何时进行ESLint语法校验：Lint on save
babel,postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置)
是否保存为模板：n
使用哪个工具安装包：npm

sass如果安装失败, 重新安装指定版本sass

npm install sass-loader@7.3.1
npm install node-sass@4.14.1

2>.基于ui界面创建Vue项目
命令：vue ui
在自动打开的创建项目网页中配置项目信息。

完善脚手架配置

默认情况下，vue-cli 3.0以后版本生成的项目，隐藏了webpack配置项，如果我们需要配置webpack，需要通过vue.config.js来配置。

环境变量

全局都可以使用环境变量：proess.env.NODE_ENV，值为当前运行环境

npm run serve时，默认会加载.env.development环境变量配置文件，可以在这里设置开发环境的环境变量，更改环境变量后需要重启项目

// 此处可以将development => dev
NODE_ENV = 'development'
// 自定义变量必须以VUE_APP开头
VUE_APP_TEST= '这是自定义的开发环境的环境变量'

npm run build时，默认会加载.env.production文件，可以在这里设置生产环境的环境变量，更改环境变量后需要重启服务

// 此处可以将production => pro
NODE_ENV = 'production'
// 自定义环境变量必须以VUE_APP开头
VUE_APP_TEST = '这是生产环境自定义的环境变量'

也可以自己创建其他环境变量配置文件，如.env.dev，.env.pre，.env.uat，.env.prod等，运行服务时通过配置--mode dev，会去执行对应的环境变量文件

可在vue.config.js文件中区分打包时选择的入口文件

// chainWebpack可以通过链式编程的形式，修改webpack配置
// configureWebpack可以通过操作对象的形式，修改webpack配置

module.exports = {
    chainWebpack:config=>{
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默认的打包入口，调用clear则是删除默认的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')
        })
        //开发模式
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

基本配置文件

Vue Loader：是一个webpack的loader，它允许你以一种名为单文件组件(SFCs)的格式撰写Vue组件，用cli创建的项目已经对常见的需求进行预先配置，不用单独配置
.browserslistrc文件用来配置目标浏览器范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。

>1%				// 浏览器全球使用情况，占比大于1%
last 2 version	// 每个浏览器最新的两个版本
not dead		// 来自last 2 version查询的浏览器，24个月内有更新

.eslintrc.js：配置ESLint的校验规则
.prettierrc：配置格式化工具的格式化规则
babel：一个js解释器，将js高级语法转化为向后兼容的js代码
babel.config.js：babel的配置文件

const prodPlugin = []
if(process.env.NODE_ENV === 'production') {
	// 如果是生产环境，则自动清理掉打印店日志，但保留error与warn
	prodPlugin.push([
		'transform-remove-console',
		{
			// 保留console.error与console.warn
			exclude: ['error','warn']
		}
	])
}
module.exports = {
	presets: ['@vue/cli-plugin-babel/preset'],
	plugins: [...prodPlugin]
}

vue.config.js 基础配置

module.exports = {
	// 基础路径
	publicPath: './',
	// 构建时的输出目录
	outputDir: 'dist',
	// 放置生成的静态资源（js,css,img,fonts）的目录
	assetsDir: 'assets',
	// 是否开启ESLint检查
	lintOnSave: true,
	// 是否需要生产环境的sourcemap
	productionSourceMap: false,
	// webpack-dev-server 相关配置
	devServer: {
		host: '0.0.0.0',
		port: 8080,
		https: false,
		// 是否在devServer启动且第一次构建完成时自动在浏览器打开
		open: false,
		// 是否使用反向代理
		proxy: false,
		proxy : {
			// 已/api开头的接口会走这里
			'/api': {
				target: 'http://10.234.99.80:8090',		// 目标地址
				changeOrigin: true,		// 它表示是否更新代理后请求的 headers 中host地址
				pathRewrite: {
					// 重写，使用‘/api’代理‘/api/request1’接口
					'^\/api': ''
				}
			}
		}
	}
}

vite

快速的冷启动
即时的模块热更新
真正的按需编译

vite会直接启动开发服务器，不需要进行打包操作，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快
在热模块HMR方面，当修改一个模块的时候，仅需让浏览器重新请求该模块即可，无须像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高

使用crate-vite 创建

官方文档：https://vitejs.cn/vite3-cn/guide/#scaffolding-your-first-vite-project
crate-vite是vite官方提供的官方脚手架，可以创建vue、react等框架的项目模板。
使用NPM，但是node.js版本需在16以上

npm create vite@latest

npm install
npm run dev

使用crate-vue 创建

官方文档：https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application
这是vue3官方提供的vue项目构建工具，基于vite
使用NPM，但是node.js版本需在16以上

npm create vue@latest

npm install
npm run dev

Nie_XiaoGang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录