logo标签列表

Vue Cli 3：定义输出路径

vue.jsvuejs2vue-cli
14

我需要按照以下描述配置最终构建的输出路径：

我的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" 文件夹中有这个文件夹。

不是完全和你的问题一样，但是类似，也许这个链接可以帮助你达成目标 --> https://github.com/vuejs/vue-cli/issues/1027 - Legion
1个回答
14

在我的构建版本上测试了该问题后，我认为您需要进行两次更改：

vue.config.js

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

并不需要担心webpack插件！

参考config:assetsDir

assetsDir

类型：字符串

默认：''

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

因此，资产最终将出现在 ../main/resources/../assets/中，这等同于 ../main/assets/。

项目中的图像位置

在我看来（经过测试），最佳位置是使用<project folder>/static，它是旧CLI2静态资源文件夹。实际上，任何位于src之外的文件夹都可以。这样就可以直接处理它们，而无需使用'webpack'。

请参见处理静态资源

"真正的"静态资产 ……相比之下，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

{
  ...
  "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 获取。

我假设您的部署机制会处理这个问题？

牛逼哥们儿（赞） - bravohex
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接