vue cli3 项目打包成浏览器可以打开的html

最新推荐文章于 2023-12-20 10:03:47 发布

原创最新推荐文章于 2023-12-20 10:03:47 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue学习专栏收录该内容

8 篇文章

订阅专栏

本文介绍了在Vue项目中遇到的问题：`npm run build`后浏览器显示空白，以及加入Vue-Router后该问题再次出现。解决方法包括在vue.config.js中设置`publicPath`为'./'，并修改router/index.js中将mode从history改为hash。通过这些配置，可以确保项目正常运行并实现浏览器自动打开页面。

1、情况分析

如果不配置一些，npm run build 出来的html游览器打开是空白的。

在根目录下新建vue.config.js文件

module.exports = {
    //基本路径
    publicPath:'./',
    //输出文件目录
    outputDir:'dist',
    //webpack-dev-server相关配置
    devServer:{
        port:8011,
        host:'localhost',
        open:true//配置游览器自动访问
    }
}