vue-cli 2升级到4避坑

155 阅读1分钟

1.项目目录变化

2.-

企业咚咚20220107103332.jpg 4.-

企业咚咚20220107103338.jpg

2.步骤

1.不用的文件夹、文件要删除。开始.babelrc、.postcssrc.js没有删除,运行时候,会提示,很多模块没有安装,报错。 2.static修改为public,并把index.html放入public目录下 3.创建babel.config.js

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ]
}

4.新建 vue.config.js 文件

const isProduct = process.env.NODE_ENV === 'production';

module.exports = {
  publicPath: isProduct ? './' : './',
  devServer: {
        proxy: 'http://localhost/8080'
      }
};

5.main.js入口文件修改

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

6.package.json改动

"scripts": {
    "start": "npm run serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.15",
    "@vue/cli-plugin-eslint": "^4.5.15",
    "@vue/cli-service": "^4.5.15",
    "babel-eslint": "^10.0.1",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.14"
  },

7.删除node_modules重新安装

3.参考

image.png www.kongxiangbo.com/?p=3296

www.cnblogs.com/vickylinj/p…