Comment direct vue-cli de mettre construite projet des fichiers dans des répertoires différents?

J'ai du mal avec ce hier moi-même, mais a réussi à craquer en fin de compte en utilisant une partie de oniondomes réponse et certains de la nouvelle documentation:

const path = require('path');    
module.exports = {
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config.output.path = path.resolve(__dirname, './server/assets/static');
            config.output.publicPath = '../assets/static/';
            config.output.filename = '[name].js';
        }
    },
    chainWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config
                .plugin('html')
                .tap(args => {
                    return [
                        {
                            filename: path.resolve(__dirname, './server/templates/test.html'),
                            template: path.resolve(__dirname, './public/index.html')
                        }
                    ];
                });
        }
    }
}

La principale différence est la chainwebpack l'article - ce qui vous a permis de vous surcharger n'importe quel configs pour les plugins référencés. L'autre réponse est l'ajout d'une autre html-webpack-plugin qui, je crois, qui est à l'origine de jeter une erreur.

J'ai d'abord eu les configs comme des objets, mais cela a causé des problèmes lorsque vous essayez d'exécuter le dev mode. Par de les changer de fonctions, vous pouvez spécifier que cela se produit uniquement lors de la construction dans le mode de production.

À tout moment, vous pouvez voir le webpack config générés avec ces remplacements en exécutant la commande suivante à partir de la console

vue inspect > output.js

La question que j'ai besoin pour résoudre était spécifique à une C# MVC projet qui ont besoin pour la sortie d'un cshtml page. Je vais laisser ma solution ici pour quelqu'un qui en a besoin.

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:60263',
                changeOrigin: true
            }
        }
    },
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config.output.publicPath = '/dist/';
            config.entry = ['babel-polyfill', './src/main.js']
        }
    },
    chainWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config
                .plugin('html')
                .tap(args => {
                return [
                    { filename: '../Views/Home/Index.cshtml', template: 'public/index.html' },
                ]});
        }
    }
}

Par défaut, les fichiers de production sont intégrées dans le /dist/ sous-dossier de votre projet Vue et ils sont censés être déployés dans le dossier racine de votre serveur ("/"). Par conséquent, vous aurez à les copier à la racine, afin d'accéder à la projet à partir de votre navigateur. Puisque ce n'est pas toujours pratique, vous pouvez construire pour un déploiement dans un sous-dossier de racine par exemple /subdir/vue_project/dist/.

Dans ce cas, suivez les conseils à https://cli.vuejs.org/config/#publicpath pour rediriger vue-cli pour créer les fichiers de projet pour cette sous-dossier. Pour ce faire, veuillez exécuter vue ui, puis ouvrez la cli 3.3+ Configuration de l'INTERFACE utilisateur de la fenêtre à localhost:8000 puis modifier la valeur par défaut de publicPath à /subdir/vue_project/dist/ et Enregistrer les modifications.

Si vous souhaitez retourner au développement (servir), ne pas oublier de mettre publicPath retour à / avant l'exécution de servir et d'accéder à localhost:8080.