npm uninstall vue-cli -g

npm install -g @vue/cli

# 安装 >= 8.9 的某个版本
nvm install 8.12.0

# 在当前 session 中使用该版本
nvm use 8.12.0

# 设置默认的 Node 版本
nvm alias default 8.12.0

plugins: [
 new webpack.DefinePlugin({
 'process.xxx': "'some value'",
 })
]

VUE_APP_KEY=VALUE

module.exports = {
 resolve: {
 alias: {
  '@': require('path').resolve(__dirname, 'src')
 }
 }
};

module.exports = {
 css: {
 loaderOptions: {
  sass: {
  data: `@import "@/styles/settings.scss";`
  }
 }
 }
};

<style scoped lang="scss" type="text/scss">

</style>

{
 ...
 
 rules: {
 'no-console': process.env.NODE_ENV === 'production' "color: #ff0000">7. Compiler 模式变更为 Runtime 模式

在升级至 Vue CLI 3 之后，直接运行可能会出现如下报错：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)

这是因为 3.x 版本默认使用的是运行时模式，需要对 main.js 文件进行修改：


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


将其改为上述方式即可。
8. 配置 lodash 使其模块化加载
在项目中，如果使用如下方式引入 lodash：


import _ from 'lodash';


那么，即使只使用了其中的 _.get() 方法，也会将全部的 lodash 依赖压缩到 .js 文件中。这不是我们期望的。
此时，我们可以通过如下方式，使其能够在这种引入方式下，也能自动实现模块加载：
首先，安装如下依赖：


npm install babel-plugin-lodash --save-dev


然后在 babel.config.js 中添加如下内容：


module.exports = {
  ...
  
  plugins: [
    'lodash'
  ]
  
  ...
};


9. 配置 analyzer
我们可以使用 analyzer 分析项目编译后的文件组成，以便进行加载速度优化。
首先安装依赖：


npm install webpack-bundle-analyzer --save-dev


然后在 vue.config.js 中添加如下配置：


const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  ...
  
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin()
    ]
  },
  
  ...
};


然后在 package.json 中添加新的命令：


"analyze": "npm_config_report=true npm run build"


之后，便可以执行以下语句来查看项目编译后文件大小组成了：


npm run analyze


注：采用这种方式后，每次 npm run dev 或 npm run build 都会自动弹出分析页面。
如果不想这么做，可以直接使用如下方式（ 无需安装 webpack-bundle-analyzer 依赖 ）：


"analyze": "vue-cli-service build --report"


当执行 npm run analyze 后，/dist 文件夹下会生成 report.html 分析报告页面。
10. 引入外部 CDN
我们可以使用 CDN 来加速部分第三方依赖的加载速度，而不是把它们全部打包到一起。
在使用 script 标签引入需要的 .js 文件后，在 vue.config.js 文件增加如下配置：


module.exports = {
  ...
  
  configureWebpack: {
    externals: {
      "echarts": "echarts",
    }
  },
  
  ...
}


即可在需要的地方按如下方式使用了：


import echarts from 'echarts';


11. 忽略编译文件大小限制警告
当执行 npm run build 时，会出现警告信息：

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).

此时，我们可以在 vue.config.js 中添加如下配置，忽略这条警告信息：


module.exports = {
  ...
  
  performance: {
    hints: false
  }
  
  ...
};


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。