使用Vue CLI Webpack后如何部署Vue應用

Question

我最近完成了創建Vue應用程序的工作，希望將其部署到互聯網上。 但是，我只能使用node打開項目並運行npm run 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復制到本地主機/測試時得到了類似的結果。
'. 當我將它們相對於子文件夾“ ”放置時，該構建假定所有js和css文件均相對於根目錄。 did the trick to get rid of the preceeding '/' 添加可以擺脫前面的'/'

在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