年三十时 vue2.6 发布，向 3.0 看齐，说明 3.0 不远了。作为开发者也应该为vue3.0 做点准备。首先是把 vue-cli 升级到 3.x ，在这记录下 vue-cli2.x 升级 vue-cli3.x 中遇见（将来）遇见的问题。
1、安装 vue-cli3.x
npm install -g @vue/cli # or yarn global add @vue/cli
如果希望还保留 vue-cli2.x 的语法或使用 2.x 的模板，建议安装 cli-init
npm install -g @vue/cli-init # or yarn global add @vue/cli-init
2、使用 vue-cli3.x 创建项目
vue create hello-world
按照提示完成创建，新建的项目比 2.0 的文件要少很多，删除了与编译相关的一些配置( 准确地说是在项目中删除了，真正的配置还是有的，在 node_modules/@vue 目录下 )。 src 目录依然不变，static 目录改成了 public。
3、遇见问题及解决方案
(1) public 与 static
public 与 static 作用基本相同，但是在动态引用路径上有区别，不能直接将 static 替换为 public 。如：'./static/config/conf.js' 替换为 './public/config/conf.js' 会报 404 错误，应改为 './config/conf.js' ，也就是 public 不要出现在路径中。
(2) heap out of memory crash
项目中如果引用了比较大的 js 文件，在开发运行时就会出现这个错误，导致出现这个错误主要是插件（plugin）内存管理不佳导，解决方法：在项目根目录下新建文件 .eslintignore ，把大文件所在的路径添加进去，如
public/
(3) 编译打包配置
如果希望对 webpack 等进行细致化配置，可以在项目根目录下新建文件vue.config.js，具体配置可参考 https://github.com/vuejs/vue-cli/blob/dev/docs/zh/config/readme.md，下面是一份基本配置。
我要评论 1 const path = require('path')
2
3 module.exports = {
4 // 部署应用包时的基本 url,用法和 webpack 本身的 output.publicpath 一致
5 publicpath: './',
6 // 输出文件目录
7 outputdir: 'dist',
8 // eslint-loader 是否在保存的时候检查
9 lintonsave: true,
10 // 是否使用包含运行时编译器的 vue 构建版本
11 runtimecompiler: false,
12 // 生产环境是否生成 sourcemap 文件
13 productionsourcemap: false,
14 // 生成的 html 中的 <link rel="stylesheet"> 和 <script> 标签上启用 subresource integrity (sri)
15 integrity: false,
16 // webpack相关配置
17 chainwebpack: (config) => {
18 config.resolve.alias
19 .set('vue$', 'vue/dist/vue.esm.js')
20 .set('@', path.resolve(__dirname, './src'))
21 },
22 configurewebpack: (config) => {
23 if (process.env.node_env === 'production') {
24 // 生产环境
25 config.mode = 'production'
26 } else {
27 // 开发环境
28 config.mode = 'development'
29 }
30 },
31 // css相关配置
32 css: {
33 // 是否分离css（插件extracttextplugin）
34 extract: true,
35 // 是否开启 css source maps
36 sourcemap: false,
37 // css预设器配置项
38 loaderoptions: {},
39 // 是否启用 css modules for all css / pre-processor files.
40 modules: false
41 },
42 // 是否使用 thread-loader
43 parallel: require('os').cpus().length > 1,
44 // pwa 插件相关配置
45 pwa: {},
46 // webpack-dev-server 相关配置
47 devserver: {
48 open: true,
49 host: 'localhost',
50 port: 8080,
51 https: false,
52 hotonly: false,
53 // http 代理配置
54 proxy: {
55 '/api': {
56 target: 'http://127.0.0.1:3000/api',
57 changeorigin: true,
58 pathrewrite: {
59 '^/api': ''
60 }
61 }
62 },
63 before: (app) => {}
64 },
65 // 第三方插件配置
66 pluginoptions: {
67
68 }
69 }
如对本文有疑问， 点击进行留言回复！！
JavaScript 好题汇总分享（持续更新，看到好题就写）
XMLHttpRequest 2级 &&进度事件&&JSONP
使用递归原生实现拷贝&&最简单的方法实现深拷贝
网友评论