Vue-cli打包后如何本地查看的操作

当你使用Vue-cli进行前端开发时，你可以在本地使用devServer插件启动一个本地服务器进行开发调试，但是在打包完成后，你可能需要查看打包后的文件在本地的运行效果。下面我来分享一下如何在本地查看Vue-cli打包后的文件。

1. 打包Vue-cli应用

首先，你需要使用Vue-cli将你的应用进行打包。你可以使用以下命令进行打包：

npm run build

这将在项目的/dist目录下生成一个打包后的文件，其中包含了所有的js、css和静态文件。值得一提的是，如果你正在使用Vue 3.x版本，npm run build命令将会自动将绝对路径转换为相对路径，以避免在引入文件时出错。

2. 在本地启动一个静态服务器

接下来，在本地启动一个静态服务器，以查看打包后的文件。有许多种方式可以实现这个目标，比如使用Node.js中的http-server或Python的SimpleHTTPServer，但是在这里，我们将使用Python的http.server。

首先，打开控制台，进入到我们的dist目录：

cd dist

然后运行以下命令：

python -m http.server 8080

这会在本地启动一个静态服务器，并将其端口号设置为8080。现在，你可以在浏览器中访问http://localhost:8080，查看我们打包后的文件了。

示例一

假设你想本地查看Vue-cli应用程序“my-app”的打包效果，你需要执行以下步骤：

1.打开终端，进入应用程序项目的根目录，运行以下命令，进行打包：

npm run build

2.进入打包后生成的dist目录：

cd dist

3.运行以下命令，启动本地服务器：

python -m http.server 8080

4.在浏览器中输入http://localhost:8080，访问我们打包后的文件。

示例二

假设你正在开发一个Vue-cli应用，它的源代码位于“/code”目录下，使用以下步骤启动http-server：

1.进入应用程序项目的根目录，运行以下命令，进行打包：

npm run build

2.进入打包后生成的dist目录：

cd dist

3.运行以下命令，启动本地服务器：

python -m http.server --directory ../code 8080

4.在浏览器中输入http://localhost:8080，查看我们打包后的文件。

需要注意的是，在第三步中，我们在启动http.server时使用了--directory选项，将http.server的根目录更改为“/code”目录，从而将我们的打包文件直接提供给浏览器，让它可以读取css文件、html文件、图片等静态资源。

希望以上内容能够对你有所帮助！