问题的标题说明了一切。
我使用的是Vue CLI，项目第一次编译得很好。但如果我试图再次构建它，它会失败，并出现以下错误：
Error: Child compilation failed:
Entry module not found: Error: Can't resolve 'C:UsersOliverWorkspaceacademy-residencespublicindex.html' in 'C:UsersOliverWorkspaceacademy-residences':
Error: Can't resolve 'C:UsersOliverWorkspaceacademy-residencespublicindex.html' in 'C:UsersOliverWorkspaceacademy-residences'
- compiler.js:79 childCompiler.runAsChild
[academy-residences]/[html-webpack-plugin]/lib/compiler.js:79:16
- Compiler.js:300 compile
[academy-residences]/[webpack]/lib/Compiler.js:300:11
- Compiler.js:556 hooks.afterCompile.callAsync.err
[academy-residences]/[webpack]/lib/Compiler.js:556:14
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[academy-residences]/[tapable]/lib/Hook.js:154:20
- Compiler.js:553 compilation.seal.err
[academy-residences]/[webpack]/lib/Compiler.js:553:30
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[academy-residences]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1323 hooks.optimizeAssets.callAsync.err
[academy-residences]/[webpack]/lib/Compilation.js:1323:35
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[academy-residences]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1314 hooks.optimizeChunkAssets.callAsync.err
[academy-residences]/[webpack]/lib/Compilation.js:1314:32
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[academy-residences]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1309 hooks.additionalAssets.callAsync.err
[academy-residences]/[webpack]/lib/Compilation.js:1309:36
[copy-webpack-plugin] unable to locate 'C:UsersOliverWorkspaceacademy-residencespublic' at 'C:UsersOliverWorkspaceacademy-residencespublic'
ERROR Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! academy-residences@0.1.0 watch: `vue-cli-service build --watch`
npm ERR! Exit status 1
npm ERR!
但是，如果我删除node_modules中的.cache文件夹，那么它将再次正确构建！
我的包.json看起来像这样：
{
"name": "academy-residences",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"watch": "vue-cli-service build --watch",
"test:unit": "vue-cli-service test:unit",
"heroku-postbuild": "vue-cli-service build"
},
"dependencies": {
"axios": "^0.18.0",
"element-ui": "^2.4.5",
"moment": "^2.24.0",
"vue": "^2.5.21",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.3.0",
"@vue/cli-plugin-unit-jest": "^3.3.0",
"@vue/cli-service": "^3.3.0",
"@vue/test-utils": "^1.0.0-beta.20",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"node-sass": "^4.9.2",
"sass-loader": "^7.0.3",
"vue-cli-plugin-element": "^1.0.1",
"vue-template-compiler": "^2.5.21"
}
}
这是我的vue.config
module.exports = {
outputDir: './public',
publicPath: process.env.NODE_ENV === 'production' ? '' : '',
configureWebpack: {
resolve: {
alias: {
'@': __dirname + '/ui/src'
}
},
entry: {
app: './ui/src/main.js'
}
}
};
package.json位于项目的根文件夹中，其中包含ui 中的所有vue源代码
root/
ui/
src/
node_modules/
package.json
这是最近的一个问题。前几天一切都很好。我认为唯一可能导致这种情况的是删除@vue/cli并重新安装它。
这是最近的一个问题。前几天一切都很好。我认为唯一可能导致这种情况的是删除@vue/cli并重新安装。
好吧，你说得对。直到2018年年中，我一直使用类似的文件夹结构
project
├── config
├── src // components, router, etc
├── static // images, robots.txt manifest, vendor css and whatnot
├── dist // not under version control, generated at deploy time
└── index.html // entry point
在构建项目时，dist文件夹被清除，然后来自src的块被编译到其中，然后static下的静态文件被复制到dist(这可能发生在编译src文件之前)。
我的配置看起来像：
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
]),
其中config.build.assetsSubDirectory为dist。
快进到当前的@vue/cli(截至2019年3月)，该模板现在使用webpack@4而不是webpack@3，并且一些默认值已更改。具体而言，他们预计结构为：
project
├── config
├── src
├── public // <── WHAIT!!! NO LONGER CALLED "static"
| └── index.html // <── NO LONGER IN ROOT
└── dist
因此，在您的配置中，声明
module.exports = {
outputDir: './public',
...
}
这意味着你在构建时正在擦除public，那么webpack就无法将你的公共资产从其默认资产源复制到输出文件夹，而输出文件夹也变了。
现在，如果你检查webpack实际在做什么(从你的项目根文件夹)
vuw inspect > output.js
或
$(npm bin)/vue-cli-service > output.js
你会看到output.js有一个类似的块：
/* config.plugin('copy') */
new CopyWebpackPlugin(
[
{
from: '/home/user/project/public',
to: '/home/user/project/dist',
toType: 'dir',
ignore: [
'.DS_Store'
]
}
]
),
如果我把我的vue.config.js改成有，就像你有一样
outputDir: "./public",
后一个命令将输出一段内容：
/* config.plugin('copy') */
new CopyWebpackPlugin(
[
{
from: '/home/user/project/public',
to: '/home/user/project/public',
toType: 'dir',
ignore: [
'.DS_Store'
]
}
]
),
这显然没有任何意义
TL/DR
不要将public用作输出文件夹，也不要想办法更改静态资产文件夹，我认为您必须在vue配置文件中手动配置CopyWebpackPlugin。