vue-cli3项目升级实战：解决常见问题与配置

"这篇文章主要详细介绍了如何正确地将项目升级到vue-cli3，分享了作者在升级过程中的步骤和遇到的问题及其解决方案。" 在将项目从较低版本的vue-cli升级到vue-cli3时，需要遵循一定的流程以确保一切顺利进行。首先，开发者可能会认为只需简单创建一个新的vue-cli3项目，然后将原有项目的目录结构和配置迁移过来，接着更新package.json并执行`yarn install`即可。然而，实际操作中，这样做可能会遇到问题，例如Vue的运行时构建错误提示：“You are using the runtime-only build of Vue...”。 Vue-cli3相较于前一个版本有了重大变化，其中最显著的是它不再包含默认的webpack配置，这意味着你需要手动创建`vue.config.js`文件来配置webpack。在创建的`vue.config.js`文件中，可以设置`chainWebpack`来调整模块规则，例如针对Vue文件的处理： ```javascript chainWebpack: config => { config.module .rule('vue') .use('vue-loader') .loader('vue-loader') .tap(options => { options.compilerOptions.preserveWhitespace = false return options }) config.resolve.alias .set('vue$', 'vue/dist/vue.esm.js') .set('@', resolve('src')) } ``` 在升级过程中，可能会遇到几个常见问题： 1. 公共静态资源不加载：这可能是由于路径配置不当导致的。可以通过添加`CopyWebpackPlugin`插件来确保静态资源被正确复制到目标目录： ```javascript const CopyWebpackPlugin = require('copy-webpack-plugin') // ... config.plugins.push( new CopyWebpackPlugin([{ from: 'public/', to: 'public' }]) ) ``` 2. Chrome中无法查看样式源文件：vue-cli3默认关闭了sourceMap，这使得在浏览器中查看样式源文件变得困难。为了解决这个问题，需要在配置中开启CSS的sourceMap： ```javascript css: { sourceMap: true }, ``` 3. 生产环境的debugger和console无法使用：这通常是因为uglifyjs-webpack-plugin或类似的压缩插件会删除调试语句。需要配置相应的插件以允许保留这些语句。 尽管vue-cli3带来了更灵活的配置和更好的性能，但升级过程中的这些坑需要开发者额外留意。理解并适当地配置webpack是成功升级的关键。在遇到问题时，查阅官方文档和社区资源通常能够找到有效的解决方案。