zoukankan      html  css  js  c++  java
  • vue-cli3.0 升级记录

    年三十时 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 }
  • 相关阅读:
    微软ASP.NET网站部署指南(4):配置项目属性
    iOS 设计模式之抽象工厂
    How can I move a MySQL database from one server to another?
    CentOS 7 上安装vim(默认未安装)
    How to resize slide dimensions without resizing any objects on the slide?
    CentOS 7.3 上安装docker
    美国留学访学(访问学者)必备信用卡
    西安理工大学税务登记证、银行账号信息
    Oracle联合多个子查询(inner join)
    linux tail
  • 原文地址:https://www.cnblogs.com/lifefriend/p/10434177.html
Copyright © 2011-2022 走看看