Vue.js Vue Cli 3:定义的输出路径

我需要配置最终生成的输出路径，如下所述：

My Vue project是结构的默认值，但输出路径在此结构之外：

输出HTML文件为：。/main/resources/

所有资产文件的输出：。/main/assets/[js/css/img]

在index.html文件中，查找资产的路径必须是“js/name.js”和类似的路径

我当前的vue.config.js不提供以下内容：

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                return options;
            });
    },
    css: {
        sourceMap: true
    },


    baseUrl: '/',
    outputDir: '../main/resources/',
    assetsDir: '../main/assets/',
    runtimeCompiler: undefined,
    productionSourceMap: undefined,
    parallel: undefined,
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.(png|jpg|gif)$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                outputPath: '../main/assets/img',
                                name: '../main/assets/img/[name].[ext]'
                            }
                        }
                    ]
                }
            ]
        }
    }
}

有人可以帮助配置此文件吗？谢谢大家!
致以亲切的问候
柴弗米

对不起，我正忙于其他项目。现在回到VueJS。
更新：
我尝试了GIT帖子中指出的内容。我的vue.config.js文件现在如下所示：

const path = require('path');
module.exports = {
    css: {
        sourceMap: true
    },

    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8080',
                'changeOrigin': true,
                'secure': false
            }
        }
    },
    baseUrl: '',
    outputDir: '../main/resources/',
    assetsDir: '../main/assets/',
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                return options
            })
        config.module
            .rule('images')
            .test(/\.(png|jpe?g|gif|ico)(\?.*)?$/)
            .use('url-loader')
            .loader('url-loader')
            .options({
                name: path.join('../main/assets/', 'img/[name].[ext]')
            })
    }
}

现在一切正常，正如我所希望的，但图像没有复制到正确的文件夹中。

---

在“../assets/”中，我有css和js文件夹，但没有img文件夹。在index.html文件旁边的“../resources”中，我有一个文件夹

在我的版本上测试了这个问题后，我认为您需要进行两项更改：

vue.config.js

module.exports={
...
outputDir:“../main/resources/”，
assetsDir:“../assets/”，
...
}

还有忘记网页包插件吧

参考号

assetsDir

类型：字符串

默认值：“”

将生成的静态资产（js、css、img、字体）嵌套在下面的目录（相对于outputDir）

因此，资产将以

。/main/resources/。/assets/

结束，这相当于

。/main/assets/

---

项目中的图像位置

IMO（来自测试）的最佳位置是使用

/static

，这是静态资源的旧CLI2文件夹。事实上，

src

之外的任何文件夹都可以。这使得我们可以按原样处理，而不是“网页包”

看

“真实”静态资产。。。相比之下，static/中的文件根本不由Webpack处理：它们以相同的文件名直接复制到最终目的地

请注意，它们确实得到了版本控制散列（见下文）

这将提供以下生成文件夹结构：

../main
  assets/
    css/
    fonts/
    images/
    js/
  resources/
    index.html
    

在CLI 3中，

/static

文件夹被更改为

/public/static

，但是如果您将图像放在那里，则会在

./main/resources/static

下创建一个额外的副本

如果您喜欢此位置（保持标准），可以使用

package.json

中的

postbuild

脚本删除该副本，例如在Windows下使用

npm run

package.json

{
...
“脚本”：{
“服务”：“vue cli服务服务”，
“生成”：“vue cli服务生成”，
“后期构建”：“rd/s/q\”./main/resources/static/images\”，
“lint”：“vue cli服务lint”，
“测试：单元”：“vue cli服务测试：单元”
},
“依赖项”：{

---

图像参考

在源代码中，我发现相对图像引用可以正常工作

比如说,

import myPic from '../public/static/images/myPic.png'

变成

../assets/img/myPic.ec4d96e7.png

在内置的app.js中

注意为版本控制添加的哈希

---

为构建服务

我注意到，您使用的文件夹结构不能与简单的

http服务器一起使用，因为index.html位于main/resources中，并且此服务器无法从main/assets获取

我想您的部署机制可以解决这个问题？
不完全是您的问题，但类似于此，也许这可以帮助您实现目标-->很棒的兄弟（y）