浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法

下面是详细讲解“浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法”的完整攻略。

问题描述

在Vue项目中经常使用Webpack对.js、.vue等文件进行打包处理，生成.bundle.js、.html等文件后，如何通过本地服务器打开这些文件并正确运行成为一个问题。当我们通过本地文件系统直接打开.bundle.js文件时，会因为文件内部引用的其他资源路径不正确，导致页面功能无法使用。下面将针对这个问题进行详细说明。

方案解决

我们可以通过在本地启动一个服务器，来达到正确运行打包后文件的目的，比如使用Node.js中的http-server库：

首先确保全局安装了http-server：

npm install -g http-server

启动服务器，并指定启动的文件夹为打包后文件夹dist：

http-server ./dist

这样打开浏览器，并访问服务器的地址就可以查看页面了。

但是，这种方式还没有解决内部引用其他资源的路径问题。

我们可以通过修改Webpack配置文件，增加publicPath选项，使模块内部引用的文件路径变为绝对路径。

具体配置可以在webpack.config.js文件的output选项中添加：

output: {
  ...
  publicPath: '/'
}

这样在Webpack打包时，内部引用其他资源的路径就会变为以/开头的绝对路径，不会再因为相对路径问题导致引用失败。

示例说明

示例一

我们可以在Vue.js官方文档的“实例”中，选择任意一个实例，比如Simple example（https://vuejs.org/v2/examples/basic.html），将其保存到本地，利用Webpack进行打包。以下是打包前和打包后的文件结构：

├── basic.html
├── index.js
├── node_modules
│   ├── ...
├── package-lock.json
├── package.json
├── webpack.config.js

在这个例子中，我们的入口文件为index.js，运行命令：

webpack

我们会发现在dist目录下生成了一个bundle.js文件和一个index.html文件，执行以下命令启动本地服务：

http-server ./dist

在浏览器中开启http://127.0.0.1:8080/index.html，我们就可以看到页面了。

示例二

在上一个示例中，我们只需要能够将打包后的html作为模板，动态插入bundle.js即可。那么我们就可以通过Webpack提供的html-webpack-plugin插件，来生成模板文件和自动插入bundle.js。

我们可以建立一个新项目，并添加以下文件：

.
├── dist // 打包后生成的文件夹
├── package.json
├── src // 源码文件夹
│   ├── index.js // 入口文件
│   └── index.html // 用于生成模板的文件
└── webpack.config.js

其中src/index.js代码内容为：

console.log('Hello world!');

src/index.html代码内容为：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>webpack demo</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

webpack.config.js代码内容为：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'My Webpack App',
            template: './src/index.html'
        })
    ]
};

这样，在运行命令：