Vue Cli 3：定义的输出路径

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

Type: string

Default: ''

A directory (relative to outputDir) to nest generated static assets (js, css, img, fonts) under.

所以资产最终会在 ../main/resources/../assets/ 中，相当于 ../main/assets/。

图像在项目中的位置

IMO（来自测试）的最佳位置是使用 <project folder>/static，这是用于静态资源的旧 CLI2 文件夹。事实上，src 之外的任何文件夹都可以。这使得然后按原样处理而不是 'webpacked'.

见Handling Static Assets

"Real" Static Assets ... In comparison, files in static/ are not processed by Webpack at all: they are directly copied to their final destination as-is, with the same filename.

确实如此，他们确实获得了版本哈希（见下文）。

这给出了以下构建文件夹结构：

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

在 CLI 3 中，/static 文件夹已更改为 /public/static，但如果您将图像放在那里，extra 复制在 ../main/resources/static.

下

如果您更喜欢此位置（以保持标准），您可以使用 package.json 中的 postbuild 脚本删除该副本，例如使用 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/resources 中并且此服务器无法从 main/assets 获取。

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

Vue Cli 3：定义的输出路径

Vue Cli 3: defined output paths

vue.js

vuejs2

vue-cli