正常情况下用vue-cli创建的vue项目,直接执行npm run build命令后,确实能够得出一个dist文件夹,但打开其中的index.html后,显示一片空白,控制台报出的警告表示无法加载指定路径的脚本资源。

为了解决这个问题,需要在打包前先对输出路径进行一些声明处理,比如,在src的同级目录下创建一个vue.config.js文件(已有的话则修改相应内容),向其中写入配置信息并保存:

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

在router的index.js的const router = new VueRouter({...})代码块中,如果存在mode: 'history'的模式设定,则需要将此设定注释掉(或删掉)。

做完上述步骤后,再执行npm run build命令,得到的资源文件夹即可正常在浏览器中显示其内容。

更多关于基于vue-element-admin-master模板构建的项目,以及基于移动端Vue项目打包成apk可安装文件的相关内容,可参考以下篇章:

https://blog.csdn.net/weixin_43476931/article/details/102843793

12-29 18:13
查看更多