如何从子目录中提供Vue.js webpack项目

Question

我已经搜索了几个小时的解决方案但它没有出现。 我有一个基于Vue.js 2 + webpack（使用webpack模板）的项目，如下所示：

嗯，资产有两个文件夹：src/assets/和static。 我已经阅读了它们的不同之处，并发现src/assets/中的文件将由webpack作为模块加载，而static/中的文件将按原样加载（请纠正我，如果我错了或补充了我误解的信息。但即使有这些信息，我也找不到办法来获得我需要的东西。

问题在于：

我想在mydomain.com/subdirectory这样的子目录中托管项目的dist版本，但是当我上传代码时，文件直接从mydomain.com/static/加载，当它们应该从{{1}加载时}}

我尝试通过多种方式更改mydomain.com/subdirectory/static/文件（如下所示）assetsSubDirectory属性设置中的assetsPublicPath和build，但我无法得到真正的内容需要。有时图像和css文件是从正确的位置加载的，但webpack生成的JS文件没有，反之亦然。

config/index.js

Answer 1

您正在使用vue-cli

在config / index.js中设置这样的构建属性：

 assetsSubDirectory: 'subdirectory/static/',
 assetsPublicPath: '/',

然后运行

npm run build 

你会得到一个像这样的dist文件夹：

.
├── index.html
└── subdirectory
    └── static
        ├── css
        │   ├── app.201d8caff7556318f5a3e08a46cb487d.css
        │   └── app.201d8caff7556318f5a3e08a46cb487d.css.map
        └── js
            ├── app.be4eeaeed988e54df219.js
            ├── app.be4eeaeed988e54df219.js.map
            ├── manifest.116a87efb9d4edc91c95.js
            ├── manifest.116a87efb9d4edc91c95.js.map
            ├── vendor.8659787d0b39fda686fd.js
            └── vendor.8659787d0b39fda686fd.js.map

Answer 2

像这样更改config / index.js，相对于当前目录进行引用

// Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: './static',
    assetsPublicPath: './',