我需要配置最终构建的输出路径,如下所述:

My Vue project是默认的 struct ,但输出路径在此 struct 之外:

Output HTML file is: ../主要/资源/

Output of all asset files: ../main/assets/[js/css/img]

在索引中.html文件找到assets资源 的路径必须是"js/name.js"和类似的文件.

我现在的vue.配置.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]'
                            }
                        }
                    ]
                }
            ]
        }
    }
}

是否有人可以帮助配置此文件?谢谢!

Sorry, I was busy with other projects. Now back to VueJS.
UPDATE:
I tried what was indicated in the GIT posts. My vue.config.js files looks now like this:

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

现在一切都正常了,就像我希望的那样,但图像没有复制到正确的文件夹中

推荐答案

在我的构建中测试了这个问题后,我认为您需要进行两项更改:

vue.config.js

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

还有100

参考文献config:assetsDir

assetsDir

类型:字符串

默认值:""

将生成的静态assets资源 (js、css、img、字体)嵌套在下面的目录(相对于outputDir).

因此,assets资源 将以../main/resources/../assets/计,相当于../main/assets/.


Image location in project

IMO(来自测试)的最佳位置是使用<project folder>/static,这是静态资源的旧CLI2文件夹.事实上,src之外的任何文件夹都可以.这使得我们可以按原样处理,而不是"网页包".

Handling Static Assets

"Real" Static Assets ... 相比之下,static/中的文件根本不由Webpack处理:它们以相同的文件名直接复制到最终目的地.

请注意,它们确实会得到一个版本控制哈希(见下文).

这将提供以下生成文件夹 struct :

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

使用CLI 3时,/static文件夹更改为/public/static,但如果将图像放在那里,则会在../main/resources/static下创建103副本.

如果您喜欢此位置(保持标准),可以在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": {

Image references

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

例如

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

换成

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

在内置的应用程序中.js.

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


Serving the build

我注意到,您使用的文件夹 struct 不能使用简单的http-server作为索引.html位于main/resources中,此服务器无法从main/assets获取.

我想你的部署机制会解决这个问题吧?

Vue.js相关问答推荐

在 Vuejs 中更新 Chartjs 图表数据集

在 Vue 中更改 json 数据后,如何在屏幕上重新呈现表格组件?

nuxt.js auth 始终重定向到登录,而不是允许转到带有 auth: false 的页面,

Vue3 动态渲染

Vue Table 2 - 自定义过滤器

Vuetify - 如何保持第一个扩展面板默认打开,如果我打开另一个面板,其他面板应该关闭?

验证子组件Vue vee-validate

vue-router的router-link实际刷新?

未捕获的类型错误:c.querySelectorAll 不是函数

Vue.js 处理多次点击事件

如何在 vue.config.js 中为生产设置 API 路径?

有没有办法知道组件实例何时挂载?

如何从 vue-apollo 中访问 this.$route?

Vue Chart.js - 条形图上的简单点/线

如何让 vuetify 数据表在卡片内时跨越容器的整个宽度?

更改时(change)调用函数

Vue $refs 对象的类型为 unknown未知

表格行上的 Vuejs 转换

将 Vue props与默认值合并

如何将props传递给组件的故事?