VueCli3.0项目打包

杰~JIE

已于 2022-03-17 12:08:47 修改

阅读量5.5k

点赞数 5

分类专栏： vue 文章标签： vue.js

于 2020-01-13 21:37:21 首次发布

本文链接：https://blog.csdn.net/weixin_44869002/article/details/103964753

版权

27 篇文章 3 订阅

订阅专栏

当我们开发完项目后，需要将项目部署到服务器上。这时，我们就需要对项目进行打包了，生成纯HTML、CSS和JS文件了。

一般的，我们进行项目打包时只需要在命令行运行 npm run build 就可以进行项目打包了。但是如果不进行一些配置的话。我们就会遇到运行打包好的 index.html 文件，页面是全部空白的情况。这时，我们只需要进行下列设置即可：

在这里插入图片描述

这个错误是因为没有在webpack 的配置文件里进行项目静态文件路径进行设置，导致加载资源失败。因此，我们需要对webpack 的配置文件进行修改添加以下代码：

module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir:'static'
}

注意: VueCli3.0 没有的webpack.js 的配置文件。所以进行配置时需要手动添加一个vue.config.js 文件，
并在添加以上代码即可。也就是说，在VueCli3.0 里webpack.js 文件被替换成了vue.config.js 文件。

进行到这里。如果你再次打包运行 index.html 文件，可能你将还是会看到一个完全空白的页面。但是控制台的报错信息已经没有了。

VueRouter的mode 配置：

VueRouter 有两种模式。一种是Hash模式（默认的模式）。在该模式下，会自动在url 添加‘#/’。另一种是History 模式。History 模式就并不会自动添加‘#/’。

因此，为了好看，有人就会手动设置为History模式。

但是呢！我们在development 环境中设置使用没有问题。而如果我们打包时也使用这个模式那就需要对服务器进行配置才能正常使用。如果没有后台服务器的配合，我们打开的页面就全是空白的。所以，这就是第二个bug的原因所在。

最简单的解决方法当然是把VueRouter mode 设置为Hash模式。如果一定要使用History模式，可以参考官网给出方法：History 模式后端配置方法

关注