vue-cli 3.0 打包后页面空白解决方式

3,586 阅读1分钟

简述

近期在打包vue文件后,打开文件后页面错误,且控制台报出如下错误:

这是因为文件在经过webpack打包后,文件路劲出现了问题

解决方法:

在文件根目录下创建一个新的文件夹vue.config.js,并且将下面的代码输入即可:

module.exports = {
  publicPath: './',
    outputDir: 'dist',
    lintOnSave: true,
    runtimeCompiler: true, //关键点在这  
    // 调整内部的 webpack 配置。
    // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
    chainWebpack: () => {},
    configureWebpack: () => {},
    // 配置 webpack-dev-server 行为。
    devServer: {
      open: process.platform === 'darwin',
      host: '0.0.0.0',
      port: 8080,
      https: false,
      hotOnly: false,
      // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
      proxy: null, // string | Object
      before: app => {}
    }
  }