Vue项目打包后不能正常显示页面

项目场景：

通过 Vue CLI 创建的 vue 项目，编写完项目后，通过 npm run bulid 对项目进行打包，再把打包得到的内容（dist文件夹）交给后端部署到服务器上。

---

问题描述：

对 vue 项目打包后，发现 dist文件中的 index.html 在浏览器中打开后页面内容无法显示，部署到服务器也一样不行，而 vue 项目在本地服务器运行时，页面是正常的。

本地服务器运行的首页：

打包后dist文件夹中的首页：

没看错，是真的什么内容都没有

---

原因分析：

vue 项目中缺少了 vue.config.js 文件。

vue-cli3 之后创建的时候并不会自动创建 vue.config.js，因为这个是个可选项，所以一般都是需要修改 webpack 的时候才会自己创建一个 vue.config.js 。

---

解决方案：

在项目根目录手动创建一个 vue.config.js 。
一个 vue-config.js 较完整的字段属性介绍：

module.exports = {

        // 选项
    
        //  基本路径
    
        publicPath: "./",
    
        //  构建时的输出目录
    
        outputDir: "dist",
    
        //  放置静态资源的目录
    
        assetsDir: "static",
    
        //  html 的输出路径
    
        indexPath: "index.html",
    
        //文件名哈希
    
        filenameHashing: true,
    
        
    
        lintOnSave: true,
    
        //  是否使用带有浏览器内编译器的完整构建版本
    
        runtimeCompiler: false,
    
        //  babel-loader 默认会跳过 node_modules 依赖。
    
        transpileDependencies: [ /* string or regex */ ],
    
        //  是否为生产环境构建生成 source map？
    
        productionSourceMap: true,
    
        //  设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。
    
        crossorigin: "",
    
        //  在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。
    
        integrity: false,
    
        //  调整内部的 webpack 配置
    
        configureWebpack: () => {}, //(Object | Function)
    
        chainWebpack: () => {},
    
        // 配置 webpack-dev-server 行为。
    
        devServer: {
    
            open: process.platform === 'darwin',
    
            host: '0.0.0.0',
    
            port: 8080,
    
            https: false,
    
            hotOnly: false,
    
            // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
    
            proxy: {
    
                '/api': {
    
                    target: "http://app.rmsdmedia.com",
    
                    changeOrigin: true,
    
                    secure: false,
    
                    pathRewrite: {
    
                        "^/api": ""
    
                    }
    
                },
    
                '/foo': {
    
                    target: '<other_url>'
    
                }
    
            }
        }
    
    }

一般的小项目可能不需要上面这么复杂，按照需求来设置，按照上面的项目（初始化的项目），手动添加一个 vue-config.js 如下：

module.exports = {

        // 选项
    
        //  基本路径
    
        publicPath: "./",
    
        //  构建时的输出目录
    
        outputDir: "dist",
    
         //  放置静态资源的目录
    
        assetsDir: "static",
    
        //  html 的输出路径
    
        indexPath: "index.html",
    
        //文件名哈希
    
        filenameHashing: true,
    
        
    
        lintOnSave: true,
    
        //  是否使用带有浏览器内编译器的完整构建版本
    
        runtimeCompiler: false,
    
        //  babel-loader 默认会跳过 node_modules 依赖。
    
      
        // 配置 webpack-dev-server 行为。
    
        devServer: {
    
            open: process.platform === 'darwin',
    
            host: '0.0.0.0',
    
            port: 8080,
    
            https: false,
    
            hotOnly: false,
    
            // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
    
            proxy: {
    
                '/api': {
    
                    target: "http://app.rmsdmedia.com", // 项目用到的域名
    
                    changeOrigin: true,
    
                    secure: false,
    
                    pathRewrite: {
    
                        "^/api": ""
    
                    }
    
                },
    
                '/foo': {
    
                    target: '<other_url>'
    
                }
    
            }
        }
    
    }

项目打包后，输出的项目即可正常显示：