欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue打包之后的dist文件里的index.html,打开显示空白,并且报错

程序员文章站 2022-06-13 15:51:11
...

vue打包之后的dist文件里的index.html,打开显示空白,并且报错

 解决方法:

新建一个文件 vue.config.js,和src同级,配置如下就OK了

// vue.config.js
module.exports = {
    lintOnSave: false ,//关闭eslint检查,
    publicPath: './',  // 基本路径
    outputDir: 'dist', // 构建时的输出目录
    assetsDir: 'static', // 放置静态资源的目录
    indexPath: 'index.html', // html 的输出路径
    filenameHashing: true, // 文件名哈希值

    // 组件是如何被渲染到页面中的? (ast:抽象语法树;vDom:虚拟DOM)
    // template ---> ast ---> render ---> vDom ---> 真实的Dom ---> 页面
    // runtime-only:将template在打包的时候,就已经编译为render函数
    // runtime-compiler:在运行的时候才去编译template
    runtimeCompiler: false,

    transpileDependencies: [], // babel-loader 默认会跳过 node_modules 依赖。
    productionSourceMap: false, // 是否为生产环境构建生成 source map

    //调整内部的 webpack 配置
    configureWebpack: () => { },

    chainWebpack: () => { },

    // 配置 webpack-dev-server 行为。
    devServer: {
        open: true, // 编译后默认打开浏览器
        host: '0.0.0.0',  // 域名
        port: 8080,  // 端口
        https: false,  // 是否https
        // 显示警告和错误
        overlay: {
            warnings: false,
            errors: true
        },
    }
}