vue3项目打包后并在本地运行

vue3项目打包

默认情况下npm run build后会将文件打包到dist目录下，其中dist/index.html是首页

从上面我们可以知道资源都是以/进行访问，我们使用vscode的live server插件后打开发现资源出现问题，访问地址为：http://127.0.0.1:5500/demo/dist/index.html

资源从/加载的话会将协议://域名：端口进行拼接导致我们的资源出现异常。

那我们如何将资源路径取消以/开头呢？

方式1：通过vue.config.js的配置

在vue3中在项目目录下新增vue.config.js，然后打包运行即可

module.exports = {
  publicPath: "./",
};

运行项目

方式1：可以使用vscode的live server插件

方式2：使用http-server在本地搭建一个服务器

步骤：

1. 全局安装http-server

npm install -g http-server

2. 创建public文件夹，然后将上面打包好的项目直接拷贝到public目录下

3. 命令行执行http-server命令启动本地服务

4. 打开浏览器进行访问