vue编译打包本地查看index文件的方法

当我们使用Vue进行项目开发时，我们需要编译打包项目以便在浏览器环境中运行。但是，对于有些开发者来说，直接在浏览器中查看页面效果并不够方便，因此我们需要一种方法能够让我们在本地直接查看打包后的index文件效果。下面是具体的步骤：

步骤一：安装http-server

http-server是一个简单的零配置命令行HTTP服务器，它可以让我们在本地快速启动静态资源服务器。

我们可以使用NPM来进行安装，打开终端窗口并输入以下命令：

npm install http-server -g

步骤二：打包Vue项目

在终端中进行以下打包命令：

npm run build

这条命令可以将我们Vue项目中的源代码编译成静态文件，这些静态文件会被打包到"dist"文件夹下。

步骤三：启动http-server

使用终端进入"dist"文件夹，输入以下命令启动http-server：

http-server

运行后，会显示如下的信息：

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://192.168.1.10:8080
Hit CTRL-C to stop the server

在这里，我们可以看到http-server的访问地址是http://127.0.0.1:8080或者http://192.168.1.10:8080。我们可以通过这些地址来访问本地的静态资源文件。其中127.0.0.1可以被替换成本机IP地址，也可以通过公网IP地址进行访问。

如果你想指定端口号，可以通过以下命令：

http-server -p 3000

这个命令会将http-server的端口号设置为3000。

示例一：访问静态HTML文件

启动http-server之后，我们可以在浏览器中输入以下地址：

http://localhost:8080/index.html

这个示例是访问打包后的index.html文件，我们可以在这个文件中查看Vue项目的效果。

示例二：访问单文件组件

我们还可以访问Vue项目中的单文件组件，首先需要在Vue项目中引入一个插件vue-cli-plugin-i18n@v2.0.5，然后进行打包。

npm install vue-cli-plugin-i18n@v2.0.5 --save-dev
npm run build

在使用http-server访问打包后的Vue项目时，我们可以通过以下地址来访问单文件组件：

http://localhost:8080/js/app.f7541e18.js

其中app.f7541e18.js是打包后的单文件组件的名称。我们可以在这个文件中查看Vue项目中的组件效果。

以上就是使用http-server来查看本地Vue项目打包文件的方法与示例。这种方法简单易行，非常适合在本地进行Vue项目的开发与调试。