web-dev-qa-db-fra.com

Comment diriger vue-cli pour mettre les fichiers de projet construits dans différents répertoires?

Il y a peut-être 8 à 9 mois, j'ai créé un projet Webpacked Vue.js avec vue-cli et j'ai pu modifier /build/webpack.dev.conf.js Pour qu'il place les fichiers "compilé" index.html Et JavaScript/CSS dans le répertoire. bons dossiers dans mon Flask app lorsque je lance npm run build.

Je montre maintenant à quelqu'un d'autre comment créer une application Vue.js/Flask et je vois que la façon dont fonctionne vue-cli semble avoir changé, de sorte que je n'ai plus accès à /build/ Dossier.

J'ai lu la documentation et ils semblaient dire qu'il résume maintenant la configuration de Webpack (" Depuis @ vue/cli-service résume la configuration de Webpack ... "), mais si je veux voir les options de configuration de Webpack, je peux faire vue inspect > output.js. Je l'ai fait et je ne vois pas les entrées que j'ai modifiées lorsque je l'ai fait il y a huit mois:

/build/webpack.prod.conf.js:

new HtmlWebpackPlugin({
  filename: process.env.NODE_ENV === 'testing'
-    ? 'index.html'
+    ? 'app.html'
    : config.build.index,
-  template: 'index.html',
+  template: 'app.html',

/build/webpack.dev.conf.js:

new HtmlWebpackPlugin({
-   filename: 'index.html',
-   template: 'index.html',
+   filename: 'app.html',
+   template: 'app.html',

/config/index.js:

module.exports = {
  build: {
    env: require('./prod.env'),
-    index: path.resolve(__dirname, '../dist/index.html'),
-    assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    index: path.resolve(__dirname, '../../server/templates/app.html'),
+    assetsRoot: path.resolve(__dirname, '../../server/static/app'),
+    assetsSubDirectory: '',
+    assetsPublicPath: '/static/app',

Il semble que la commande de ligne de commande vue build Accepte un argument qui vous permet de spécifier le répertoire de sortie, mais je dois spécifier deux répertoires différents: un pour le fichier HTML (qui doit résider dans le fichier /templates/) Et un autre pour le code JavaScript/CSS (qui devrait aller dans le dossier /static/ De Flask).

vue.jsvue-cli
19
Nathan Wailes

Je devais faire cela pour un nouveau projet utilisant la dernière version de Vue-CLI et c’était assez simple: il me fallait juste un fichier nommé vue.config.js au plus haut niveau de mon projet Vue et dans lequel j’avais besoin du code suivant:

const path = require("path");

module.exports = {
  outputDir: path.resolve(__dirname, "../backend/templates/SPA"),
  assetsDir: "../../static/SPA"
}

Notez que Vue-CLI supprime le contenu des dossiers que vous spécifiez et que vous souhaitez utiliser pour sa sortie. Pour résoudre ce problème, j’ai créé les dossiers "SPA" dans mon templates/ et static/ répertoires.

Notez également que le assetsDir est spécifié par rapport au outputDir.

12
Nathan Wailes

Par la vuejs liée guide

[~ # ~] avertissement [~ # ~]

Certaines options de webpack sont définies en fonction des valeurs de vue.config.js et ne doivent pas être mutées directement. Par exemple, au lieu de modifier output.path , vous devez utiliser l’option outputDir dans vue.config.js; au lieu de modifier output.publicPath, vous devez utiliser l'option baseUrl dans vue.config.js. En effet, les valeurs de vue.config.js seront utilisées à plusieurs endroits dans la configuration pour que tout fonctionne correctement ensemble.

Et la vuejs config référence

[~ # ~] pointe [~ # ~]

Utilisez toujours outputDir au lieu de modifier webpack output.path.

Voici un exemple vue.config.js que je viens de vérifier en utilisant vue-cli-service @ 3.0.0-rc.2

const path = require("path");

module.exports = {
  outputDir: path.resolve(__dirname, "./wwwroot/dist"),
  chainWebpack: config => {
    config.resolve.alias
      .set("@api", path.resolve(__dirname, "./src/api"));
  },

  pluginOptions: {
    quasar: {
      theme: 'mat'
    }
  }
}
11
bvj

Par défaut, les fichiers de production sont intégrés à la /dist/ sous-dossier de votre projet Vue et ils sont supposés être déployés dans le dossier racine de votre serveur ("/"). Par conséquent, vous devrez les copier à la racine pour accéder au projet depuis votre navigateur. Comme cela n’est pas toujours pratique, vous pouvez les créer pour un déploiement dans un sous-dossier de la racine, par exemple /subdir/vue_project/dist/.

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

Si vous souhaitez revenir au développement (servir), n'oubliez pas de mettre publicPath à / avant d’exécuter serve et d’accéder à localhost: 8080.

4
vess

J'ai moi-même lutté hier contre ce problème, mais j'ai finalement réussi à le résoudre en utilisant une partie de la réponse à onions et une partie 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 réside dans la section chainwebpack - elle vous a permis de remplacer toute configuration existante pour les plugins référencés. L’autre réponse est d’ajouter un autre plug-in html-webpack qui, je crois, est la cause d’une erreur.

À l'origine, j'avais les configs en tant qu'objets, mais cela posait problème en essayant de fonctionner en mode dev. En les changeant en fonctions, vous pouvez spécifier que cela ne se produit que lors de la création en mode de production.

A tout moment, vous pouvez voir la configuration de webpack générée avec ces remplacements en lançant ce qui suit à partir de la console

vue inspect > output.js

Le problème que je devais résoudre était spécifique à un projet C # MVC - nécessitant une sortie sur une page cshtml. Je vais laisser ma solution à cela ici pour quiconque 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' },
                ]});
        }
    }
}
4
Edward Bonnett

Pour être honnête, je ne vois pas quel problème vous avez depuis que vous avez vu la documentation et pointé directement sur la bonne section. Je viens de créer un nouveau projet vue.js avec vue-cli 3.0, un fichier vue.config.js Dans le répertoire racine du projet et une recherche sur output.js (Créé automatiquement avec vue inspect > output.js) J'ai écrit ce qui suit:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  configureWebpack: {
    output: {
      path: path.resolve(__dirname, './server/assets/static'),
      filename: '[name].js',
      publicPath: '../assets/static/',
    },
    plugins: [
      new HtmlWebpackPlugin({
        filename: path.resolve(__dirname, './server/templates/test.html'),
        template: path.resolve(__dirname, './public/test.html'),
      }),
    ],
  },
};

Maintenant, lorsque je lance le script build, mes fichiers sont placés dans le dossier another-dir Et le code HTML est extrait de test.html. Je suppose qu'en suivant cette méthode, vous pouvez reconfigurer votre projet en fonction de vos besoins.

J'espère que j'ai bien compris votre question et que je n'ai pas perdu le temps de tout le monde.

EDIT: Cela semble placer les fichiers comme vous le souhaitez, mais pour une raison quelconque, HtmlWebpackPlugin crée le dossier dist/ Et génère le fichier .html à deux reprises dans /dist Et /templates. Pour celui-ci je n'ai pas pu trouver de solution pour le moment.

2
oniondomes