我需要配置最终构建的输出路径，如下所述：
我的Vue项目是默认的结构，但输出路径在这个结构之外：
输出HTML文件为：/主要/资源/
所有资产文件的输出：/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]'
}
}
]
}
]
}
}
}
有人可以帮助配置此文件吗？谢谢
致以亲切的问候
tschaefmedia
对不起，我正忙于其他项目。现在回到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/',
...
}
和忘记webpack插件！
参考配置：assetsDir
assetsDir
类型：字符串
默认值：">
一个目录(相对于outputDir(，用于嵌套生成的静态资产(js、css、img、字体(。
因此资产最终将位于../main/resources/../assets/中，相当于../main/assets/。
项目中的图像位置
最佳位置IMO(来自测试(是使用<project folder>/static，它是用于静态资源的旧CLI2文件夹。事实上，src之外的任何文件夹都可以。这样就可以按原样处理，而不是"webpacked"。
参见处理静态资产
"真实的"；静态资产。。。相比之下，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中获取。
我想你的部署机制能解决这个问题吗？