vue打包项目本地打开

一、安装NodeJs

1.1 下载安装包

去NodeJs官网下载安装包安装

1.2 使用npm安装vue

• vue2安装命令

npm install vue@2

# 可选安装element-ui前端框架
npm install element-ui

• vue3安装命令

npm install vue@3

# 可选安装element-plus前端框架
npm install element-plus

二、创建vue项目

# 创建vue2项目
npm init vue@2

# 创建vue3项目
npm init vue@3

三、打包vue项目

3.1 配置打包资源目录

在vite.config.js文件中，添加base: './'配置，如下图21行所示。

3.2 执行打包

在项目文件夹下执行以下命令

npm run build

3.3 更改js引用方式

打开生成的dist目录中的index.html文件，
将其中的<script>标签引用的module和crossorigin属性去掉，如下图所示。

之后即可在本地打开并正常显示。