搭建vue cli4项目及打包配置

1.安装vue/cli4.x

//卸载
npm uninstall vue-cli -g
//安装
 npm install -g @vue/cli
//安装yarn
npm install -g yarn
yarn config set registry https://registry.npm.taobao.org -g
//http://cdn.npm.taobao.org/dist/node-sass 已经失效
yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass -g
yarn config get registry

2.创建vue项目

vue create 项目名称(不可有大写字母)

在这里插入图片描述
//选择第三个按需配置
在这里插入图片描述
搭建vue cli4项目及打包配置_第1张图片
空格选择,选好按回车(enter)
在这里插入图片描述
一个vue 2
一个vue 3
我这里选择vue2
在这里插入图片描述
是否使用路由的history模式,看个人及项目,开发时候可以不选择
使用history,上线后需要后端有相关配置
继续回车
搭建vue cli4项目及打包配置_第2张图片
由于本菜鸟还不会dart-sass
所以选择node-sass
搭建vue cli4项目及打包配置_第3张图片
选择哪个ESLint自动化代码格式化检测,分别为,只预防、airbnb配置、标注配置、最高配置,这里选择左后一种最高配置
搭建vue cli4项目及打包配置_第4张图片
选择代码检测的时机,这里选择在保存代码时检测
搭建vue cli4项目及打包配置_第5张图片
更新换将单独配置的文件放到pakage.json还是放在单独的文件,这里选择单独的文件即可,清晰
在这里插入图片描述
是否把以上设置过的预设配置保存起来,这里不需要,每次创建项目重新选择一遍不麻烦,很快就选择好了,输入n

如果报错在这里插入图片描述
莫慌,把
搭建vue cli4项目及打包配置_第6张图片
node_modules删掉

npm install -g cnpm -registry=https://registry.npm.taobao.org

使用cnpm i重新下载依赖
在这里插入图片描述
3.运行项目
在这里插入图片描述

yarn serve

搭建vue cli4项目及打包配置_第7张图片
复制这网址到浏览器
搭建vue cli4项目及打包配置_第8张图片
4.到此为止已成功,下面配置babel.config.js
如果没有babel.config.js

//安装: 
npm install babel-plugin-component -D

安装成功之后生成文件: babel-config.js
下面配置 Element 文件按需加载

module.exports = {
     
  presets: [
    "@vue/cli-plugin-babel/preset"
  ],
  plugins: [
    [
      "component",
      {
     
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
}

5.下面开始vue.config.js配置,没有这文件,新建一个
搭建vue cli4项目及打包配置_第9张图片
安装webpack官网

npm install --save-dev webpack

安装compression-webpack-plugin 开启gzip 官网

npm i -D compression-webpack-plugin
const webpack = require("webpack");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ["js", "css"];
module.exports = {
     
    publicPath: "./",//打包后的位置(如果不设置这个静态资源会报404)
    // publicPath: process.env.NODE_ENV === "production" ? "http://47.92.237.225:8080/dist" : "./",
    outputDir: "dist",//打包后的目录名称
    assetsDir: "static",//静态资源目录名称
    productionSourceMap: false,  //去掉打包的时候生成的map文件
    lintOnSave: true,
    filenameHashing: false,
    devServer: {
     
        sockHost: "http://192.168.2.22:8080/",
        disableHostCheck: true,
        host: "0.0.0.0",  //不清楚主机和目的网络
        port: 8080, // 源地址端口,自行修改
        disableHostCheck: true,
        hotOnly: false,
        useLocalIp: false,
        //下面配置为开启gzip
        configureWebpack: {
     
            plugins: [
                new CompressionWebpackPlugin({
     
                    filename: '[path].gz[query]',   // 提示[email protected]的话asset改为filename
                    algorithm: 'gzip',
                    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                    threshold: 10240,
                    minRatio: 0.8,
                    deleteOriginalAssets: false  //不删除源文件
                }),
            ]
        }
    }
}

你可能感兴趣的:(vue脚手架,vue)