webpack 打包

1. 理解打包

1.1 命令: npm run build

1.2 作用：用vue-cli内部集成的webpack，把 .vue, .less, .js 等打包成浏览器可直接执行的代码.html,.css,.js。

1.3 结果：会在项目根目录下创建 /dist目录，在这个目录下产出打包后的结果。

2. 查看导出默认配置

vuecli中的打包工具仍是webpack，只不过vuecli把webpack的配置封装起来了，我们不能直接看到，可通过如下命令来查看：

 // 导出当前生产模式下的webpack配置文件到config.json
 // webpack.config.js
 vue inspect --mode=production > config.json 

3. 打包设置静态资源路径问题

3.1 双击dist的index.html文件无法打开

原因：

3.2 分析index.html打包后的代码发现, 所有静态资源的目录都是 /开头的,意思就是要访问url根目录下的文件, 但是服务器是vscode根目录为准, 路径找不到

4. 解决

让打包后的路径都以./ 相对路径为准。在（可新建）vue.config.js - 配置中, 添加一下配置

module.exports = {
  // https://cli.vuejs.org/zh/config/#publicpath
  // 设置打包后访问资源方式，以是相对路径来访问
  // dist目录下的index.html就可以直接双击打开
  publicPath: './'
}

5. 然后 从新打包————> 从新打包 从新打包 从新打包

6. 再直接打开dist/index.html即可了

---

---

---

---

7. 如果打开index.html文件出现白屏的话 也可以在 dist/index.html文件的引入文件中 加 . 但是也有可能会有新问题出现