Vue Cli 3：定义的输出路径

Posted 2023-02-22

【中文标题】Vue Cli 3：定义的输出路径

【英文标题】：Vue Cli 3: defined output paths

【发布时间】：2018-12-25 01:50:12

【问题描述】：

我需要如下配置最终构建的输出路径：

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

【问题讨论】：

不完全是你的问题，但相似，也许这可以帮助你达到目标 --> github.com/vuejs/vue-cli/issues/1027

【参考方案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 之外的任何文件夹都可以。这使得然后按原样处理而不是“webpacked”。

见Handling Static Assets

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

注意一点，它们确实获得了版本控制哈希（见下文）。

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

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

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

【讨论】：

很棒的兄弟（y）