Vue CLI打包后使用Express本地运行index.html及常见问题解决

当使用Vue CLI进行项目构建并生成`dist`文件夹时，打包后的静态文件通常用于部署到服务器。然而，直接在本地浏览器中打开`dist`目录下的`index.html`文件可能会遇到问题，因为浏览器可能无法解析或加载非HTML资源。此时，可以通过在`dist`目录下设置一个轻量级的服务器来解决这个问题。 首先，要解决的是本地运行时的问题。推荐的方法是利用Express框架创建一个简单的HTTP服务器。具体步骤如下： 1. 在`dist`目录下创建一个名为`server.js`的文件，这是你的服务器脚本。 2. 在`server.js`中，导入`express`模块，然后初始化一个Express应用： ```javascript const express = require('express'); var app = express(); ``` 3. 设置服务器的基本配置，如监听的主机和端口： ```javascript const hostname = 'localhost'; const port = 3000; ``` 4. 使用`express.static()`中间件，使服务器能够提供静态文件，这里是指当前目录`./`，使得浏览器能够访问`dist`中的所有文件： ```javascript app.use(express.static('./')); ``` 5. 启动服务器，监听指定的端口，并在控制台上打印一条消息表示服务器正在运行： ```javascript app.listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}`); }); ``` 通过运行`npm install express`来安装必要的依赖，然后在终端中进入`dist`目录，执行`node server.js`启动服务器。此时，可以在浏览器中输入`http://localhost:3000`访问你的Vue应用。 至于`npm run dev`和`npm run build`的区别，`npm run dev`通常用于开发阶段，它启动了一个热重载的开发服务器，监听本地的非标准端口，方便快速迭代开发。而`npm run build`则用于生成生产环境的静态文件，这些文件需要部署到服务器上供用户访问。`npm run dev`的端口与`nodeserver`的端口不同，因为它们分别服务于不同的需求。 另外，如果在本地运行`index.html`时页面空白并报错，可能是由于`assetPublicPath`配置不正确或者路由模式问题。对于Vue CLI 2，你需要在`config/index.js`中修改`assetPublicPath`为`./`；对于Vue CLI 3，则需在`vue.config.js`中设置`publicPath`和`assetsDir`，以及确保路由模式设置为`hash`。 总结来说，解决Vue CLI打包后本地运行`index.html`的问题包括设置静态服务器、正确配置`assetPublicPath`和路由模式，以及理解`npm run dev`和`npm run build`在本地开发和部署过程中的不同角色。