如何指导vue-cli将构建的项目文件放在不同的目录中？

时间：2018-02-18 12:29:03

标签： vue.js vue-cli

也许8到9个月前我用vue-cli创建了一个Webpacked Vue.js项目，并且能够修改/build/webpack.dev.conf.js以使其编译＆＃34;编译＆＃34;我运行index.html时Flask应用中右侧文件夹中的npm run build和JavaScript / CSS文件。

我现在正在向其他人展示如何创建Vue.js / Flask应用程序，我发现vue-cli的工作方式似乎已经改变，因此我无法再访问/build/文件夹。

我阅读了文档和they seemed to say，它现在摘录了Webpack配置（＆＃34; 自@ vue / cli-service摘录webpack配置... ＆＃ 34;），但如果我想看到Webpack的配置选项，我可以vue inspect > output.js。我做到了这一点，并且在我八个月前做的时候没有看到我改变的那些条目：

/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',

看起来vue build命令行命令可以接受允许您指定输出目录的参数，但我需要指定两个不同的目录：一个用于HTML文件（它应该存在于Flask中＆＃ 39; s /templates/文件夹），另一个用于JavaScript / CSS代码（应该放在Flask＆＃39; /static/文件夹中）。

6 个答案:

答案 0 :(得分：9)

根据相关的vuejs guide

  

警告

     

根据vue.config.js和中的值设置一些webpack选项   不应该直接变异。例如，而不是修改   output.path ，你应该在vue.config.js中使用outputDir选项;   而不是修改output.publicPath，你应该使用baseUrl   vue.config.js中的选项。这是因为vue.config.js中的值   将在配置内的多个位置使用以确保一切   一起工作。

相关的vuejs配置reference

  

提示

     

始终使用outputDir而不是修改webpack output.path。

以下是我刚刚使用vue-cli-service验证的 vue.config.js 示例@ 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'
    }
  }
}

答案 1 :(得分：4)

我自己昨天一直在努力解决这个问题，但最后通过使用洋葱圈的部分回答和一些新文档设法破解了它：

RewriteRule . /news.php [L]
RewriteRule . /view.php [L]
RewriteRule . /view.php [L]

关键区别在于chainwebpack部分 - 这允许您覆盖引用的插件的任何现有配置。另一个答案是添加另一个html-webpack-plugin，我认为这会导致它抛出错误。

我最初把配置作为对象，但这在尝试以开发模式运行时引起了问题。通过将它们更改为函数，您可以指定仅在生产模式下构建时才会出现这种情况。

通过从控制台运行以下内容，您可以随时看到通过这些覆盖生成的webpack配置

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')
                        }
                    ];
                });
        }
    }
}

我需要解决的问题是特定于C＃MVC项目 - 需要输出到cshtml页面。对于任何需要它的人，我会在这里留下我的解决方案。

vue inspect > output.js

答案 2 :(得分：3)

我只需要使用最新的Vue-CLI为一个新项目执行此操作，这非常简单：我只需要在我的Vue项目的顶层以及其中包含一个名为vue.config.js的文件我需要以下代码：

const path = require("path");

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

请注意，Vue-CLI将删除您指定用于其输出的任何文件夹的内容。为了解决这个问题，我在templates/和static/目录中创建了“ SPA”文件夹。

还要注意，assetsDir是相对于outputDir指定的。

答案 3 :(得分：3)

使用较新版本的 Vue.js，您只需在根文件夹的文件 publicPath 中设置正确的 vue.config.js：

// vue.config.js file to be place in the root of your repository

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/'
}

更多信息：https://cli.vuejs.org/guide/deployment.html#general-guidelines

答案 4 :(得分：2)

老实说，自从你看过文档并直接指向它的正确部分后，我就不知道你遇到了什么问题。我刚刚使用vue-cli 3.0创建了一个新的vue.js项目，在项目的根目录中创建了vue.config.js文件并查看output.js（使用vue inspect > output.js自动创建）我写了以下内容：

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'),
      }),
    ],
  },
};

现在，当我运行build脚本时，我的文件会转到another-dir文件夹，而html代码则来自test.html。我想按照这种方法，您可以根据需要重新配置项目。

希望我确实理解你的问题，并没有浪费每个人的时间。

编辑：这似乎是根据需要放置文件，但出于某种原因，HtmlWebpackPlugin碰巧在dist/和/dist两次创建/templates文件夹和输出.html文件@Override public ResultSet getCorrespondenceDetail(Long id) { String sql="{call dbpk_person_correspondence.get_report_detail(?,? )}"; Connection conn = JDBCUtility.getConnection(); ResultSet result = null; CallableStatement cstmt; try { cstmt = conn.prepareCall(sql); cstmt.registerOutParameter(1, oracle.jdbc.OracleTypes.CURSOR); cstmt.setLong(2,id); cstmt.execute(); result = (ResultSet)cstmt.getObject(1); } catch (SQLException e) { e.printStackTrace(); } return result; } 。对于这个我还没有找到解决方案。

答案 5 :(得分：2)

默认情况下，生产文件内置于Vue项目的viewWillLayoutSubviews子文件夹中，并且应该部署在服务器的根文件夹（“ /”）中。因此，您必须将它们复制到根目录才能从浏览器访问项目。由于这并不总是很方便，因此您可能希望将其构建为部署在根目录的子文件夹中。 /dist/。

在这种情况下，请按照https://cli.vuejs.org/config/#publicpath的建议重定向 vue-cli ，以为此子文件夹构建项目文件。为此，请执行/subdir/vue_project/dist/，然后在localhost：8000打开cli 3.3+ UI Configuration窗口，然后将vue ui的默认值更改为publicPath并保存更改。

如果您想返回开发（服务），请不要忘记在执行服务和访问localhost：8080之前将/subdir/vue_project/dist/设置回publicPath。

相关问题
最新问题