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

时间:2017-08-31 14:46:51

标签: webpack vuejs2

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

Directories structure of the project

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

问题在于:

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

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

config/index.js

2 个答案:

答案 0 :(得分:3)

您正在使用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

答案 1 :(得分:0)

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

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