使用 vue cli webpack 后如何部署 Vue 应用答案

【问题标题】：How to deploy a Vue app after using vue cli webpack使用 vue cli webpack 后如何部署 Vue 应用
【发布时间】：2018-01-26 01:38:22
【问题描述】：

我最近创建了一个希望在互联网上部署的 Vue 应用程序。但是，我只能使用 node 打开项目并运行 npm run dev。如果我双击 index.html 文件，我只会看到一个空白页。如何部署我的网站以便浏览器可以呈现我的 Vue 应用程序？

【问题讨论】：

How to deploy Vue app?的可能重复

标签： node.js vue.js vuejs2 web-deployment

【解决方案1】：

希望它对某人有用，仍然：

使用@vue/cli 3，我在将 dist 复制到我的 localhost/test 时得到了类似的结果。
该构建假定所有 js 和 css 文件都相对于根目录，而我将它们相对于子文件夹“test”。添加 publicPath : "" 可以摆脱前面的 '/'

在 vue.config.js 中我添加了：（使用 apache/php 的 dev 代理）

module.exports = {

    devServer: {
        proxy: 'http://localhost:80/proxy'
    },

    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            output: {
                 publicPath : "" // only for prod
            }
        } else { // dev
            // org, no changes
        }       
    }  
}

另请参阅
https://alligator.io/vuejs/using-new-vue-cli-3/
https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md#inspecting-the-projects-webpack-config

【讨论】：

【解决方案2】：

如果您使用 vue-cli 生成项目，您应该能够运行 npm run build 并获得一个缩小的单个 .js 文件。

请看这里：http://vuejs-templates.github.io/webpack/commands.html

这将为您提供一个带有index.html 和build.js 的dist 文件夹。您应该能够打开 html 文件并查看您的应用。

【讨论】：

我运行了 npm run build 并得到了一个 dist 文件夹。在 dist 文件夹中，我有一个 index.html 文件和一个静态文件夹。但是，当我点击 index.html 时，我仍然得到一个空白页面，而不是我的应用程序。
构建过程告诉您这些文件应该由 http 服务器提供服务。
页面是空白的，因为文件的路径被一个反斜杠关闭了。
你最终让它工作了吗？如果您仍然没有运气，我可以向您展示如何设置一个简单的快速服务器并提供文件。祝你好运！
从 vue-cli 2.9.1 开始，我没有得到一个 .js 文件。使用默认的 webpack 而不是简单的 webpack，我在 static 子文件夹下获得了单独的 css 和 js 目录和文件。使用 webpack-simple 我得到一个 build.js 文件。我需要使用 webpack 来更改应用程序索引文件的名称并移动它，因为我在另一个后端框架中工作。 github.com/vuejs-templates/webpack/blob/develop/docs/backend.md 对使用默认 webpack 设置获取单个 build.js 文件有任何想法吗？