创建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 项目名称(不可有大写字母)

在这里插入图片描述
//选择第三个按需配置

空格选择，选好按回车（enter）

一个vue 2
一个vue 3
我这里选择vue2

是否使用路由的history模式，看个人及项目，开发时候可以不选择
使用history，上线后需要后端有相关配置
继续回车
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210105115428305.png
由于本菜鸟还不会dart-sass
所以选择node-sass

选择哪个ESLint自动化代码格式化检测，分别为，只预防、airbnb配置、标注配置、最高配置，这里选择左后一种最高配置

选择代码检测的时机，这里选择在保存代码时检测
在这里插入图片描述
更新换将单独配置的文件放到pakage.json还是放在单独的文件，这里选择单独的文件即可，清晰

是否把以上设置过的预设配置保存起来，这里不需要，每次创建项目重新选择一遍不麻烦，很快就选择好了，输入n

如果报错 在这里插入图片描述
莫慌，把

node_modules删掉

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

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

yarn serve

在这里插入图片描述
复制这网址到浏览器

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配置，没有这文件，新建一个
在这里插入图片描述

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,
               proxy: {
    
    
            '/api': {
    
    
                target: "http://localhost:8888",//设置你调用的接口域名和端口号 别忘了加http
                changeOrigin: true,
                pathRewrite: {
    
    
                    '^/api': ''
                    //这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替
                    //比如我要调用'http://40.00.100.133:3002/user/login'，直接写‘/api/user/login'即可
                }
            }
        }
    }
}

6.配置路由懒加载

//1、在命令行执行
 npm install babel-plugin-dynamic-import-node -S -D
//2、在babel.config.js中添加插件

待更新

创建vue cli4项目及打包配置

猜你喜欢