解决vue

您所在的位置:网站首页 vuecli3打包后怎么部署 解决vue

解决vue

2023-03-25 07:22| 来源: 网络整理| 查看: 265

问题

学习的过程总是荆棘满布,vue又一次绑架了我的搜索引擎。

在我使用vue-cli 3.x内置的 build (vue-cli-service build)之后,index果然成为了空白页面。

一些知识

什么是打包?

打包这个概念,我不清楚最初的来源是哪里,但是像webpack,vue-cli等都有这个概念。

我也没能找到官方的解释,我简单写个对比吧。

常见的使用vue-cli 3.x部署的项目打包后的项目,也是最常见的独立js/css的页面

所以,在这里我只能先狭义的把打包理解成如此。实际上打包做的事情应该会更多。

打包

我使用的命令就是

vue-cli-service build

这个命令也被默认配置在了项目里,VS CODE中会自动显示build选项:

解决

如果不做任何操作,直接打包出来的index显示内容应该是空白的。

vue.config.js

在项目根部录下,创建 vue.config.js文件,并填入以下内容:

module.exports = { publicPath: "./" };

这里指定的应该是webpack默认的加载内部文件目录,“./”实际上就是此文件的同级目录,也就是项目根目录。

history

如果你在创建项目时选择了history路由模式,打开Router内的index.js,也就是默认路由的配置文件,把history一行注释掉:

const router = new VueRouter({ // mode: "history", base: process.env.BASE_URL, routes });

这里的原理我并不清楚,但是的确需要这样操作。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3