前景:在Project B中使用到Project A的某npm包,npm link在本地开发过程中初始在Project A的npm包的修改没有生效,过程中unlink后再次链接以及删除Project B原有安装的某npm包,运行Project B遇到一系列的报错。。
问题一 报错Error: No PostCSS Config found in
参考了查到的文章:Error: No PostCSS Config found in... 报错 ,作了配置
即在 Project A项目根目录,新建了文件postcss.config.js
文件,对postcss进行配置
module.exports = {
plugins: {
'autoprefixer': {browsers: 'last 5 version'}
}
}
但是运行Project B会有警告
Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.
Using browsers option can cause errors. Browserslist config
can be used for Babel, Autoprefixer, postcss-normalize and other tools.
If you really need to use option, rename it to overrideBrowserslist.
Learn more at:
https://github.com/browserslist/browserslist#readme
https://twitter.com/browserslist
根据提示修改Browserslist
module.exports = {
plugins: {
'autoprefixer': {Browserslist: 'last 5 version'}
}
}
npm link @ai/project-ele
npm 包project-ele
/Users/wangh/wh_dev/my_project/ProjectB/node_modules/@ai/project-ele -> /Users/wangh/.nvm/versions/node/v10.16.2/lib/node_modules/@ai/project-ele -> /Users/wangh/wh_dev/my_project/ProjectA
问题二 会报"export 'XXXX' was not found in
npm run serve
symlinks: true
/Users/wangh/wh_dev/my_project/ProjectA/dist/project-ele.js
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
warning in ./src/page/data/cost.vue?vue&type=script&lang=js&
XXXX
、YYYY
代指组件名称
"export 'XXXX' was not found in '@ai/project-ele/dist/project-ele'
warning in ./src/components/base-pannel.vue?vue&type=script&lang=js&
"export 'YYYY' was not found in '@ai/project-ele/dist/project-ele'
warning in ./src/page/task/list.vue?vue&type=script&lang=js&
"export 'ZZZ' was not found in '@ai/project-ele/dist/project-ele
查了一下,看到文章记一次错:Vue 构建项目后使用 npm link 失败
最后使用github
上别人也遇到问题的解决方案Does not work with npm link
,最终得以解决。
将 webpack
的 resolve.symlinks
配置为 false;
resolve.symlinks
boolean = true
是否将符号链接(symlink)解析到它们的符号链接位置(symlink location)。
修改了我ProjectB项目vue.config.js配置。
module.exports = {
//...
configureWebpack: {
resolve: {
// 是否将符号链接(symlink)解析到它们的符号链接位置
// 启用时,符号链接(symlink)的资源,将解析为其 真实 路径,而不是其符号链接(symlink)的位置。
// 启用时注意,当使用创建符号链接包的工具(如 `npm link`)时,这种方式可能会导致模块解析失败
symlinks: false
}
}
};
vue-cli 3.x vue.config.js配置(包含webpack)
参考文章:
1、Error: No PostCSS Config found in... 报错
2、记一次错:Vue 构建项目后使用 npm link 失败