Question

我需要按如下所述配置最终版本的输出路径：

我的Vue项目是结构的默认设置，但输出路径不在此结构之内：

输出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]'
                            }
                        }
                    ]
                }
            ]
        }
    }
}

有人可以帮助配置此文件吗？谢谢！
问候
tschaefermedia

对不起，我正忙于其他项目。现在回到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 文件旁边的“ ... / ressources” 中，我有此文件夹。

Answer 1

在对我的构建进行测试之后，我认为您需要进行两项更改：

vue.config.js

module.exports = {
  ...
  outputDir: '../main/resources/',
  assetsDir: '../assets/',
  ...
}

和 忘记Webpack插件 ！

参考config:assetsDir

assetsDir

类型：字符串

默认值：“

一个目录（相对于outputDir），用于在其下嵌套生成的静态资产（js，css，img，字体）。

因此资产将以../main/resources/../assets/结尾，等于../main/assets/。

项目中的图片位置

IMO（根据测试）的最佳位置是使用<project folder>/static，它是用于静态资源的旧CLI2文件夹。实际上，src之外的任何文件夹都可以。这样就可以按原样处理，而不是“打包”处理。

请参见Handling Static Assets

“真实”静态资产 ... ...相比之下，Webpack根本不处理 static / 中的文件：它们直接复制为最终目标-是，具有相同的文件名。

请注意，它们确实会获得版本哈希（请参见下文）。

这提供了以下构建文件夹结构：

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

使用CLI 3，/static文件夹已更改为/public/static，但是如果将图像放在此处，则会在 extra 下创建一个副本../main/resources/static。

如果您希望使用此位置（保持标准状态），则可以在postbuild中使用package.json脚本删除该副本，例如在Windows下使用npm run，

package.json

{
  ...
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "postbuild": "rd /s /q \"../main/resources/static/images\"",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {

图片参考

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

例如

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

更改为

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

在内置的app.js中。

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

提供构建服务

我注意到您使用的文件夹结构无法与简单的http-server配合使用，因为index.html位于main /资源中，并且该服务器无法从main /资产中获取。

我想您的部署机制可以解决这个问题？

Vue Cli 3：定义的输出路径

1 个答案: