Question

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

Answer 1

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

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

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

Answer 2

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

使用@ 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

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

2 个答案: