如何在使用 vue cli webpack 后部署 Vue 应用程序

Question

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

Answer 1

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

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

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

Answer 2

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

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

在 vue.config.js 我添加了 : ( 使用 apache/php 的开发代理 )

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

如何在使用 vue cli webpack 后部署 Vue 应用程序

How to deploy a Vue app after using vue cli webpack

web-deployment

node.js

vue.js

vuejs2