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입니다.
여기서는 vue 2

가 라우팅 기록 모드를 사용할지 여부를 선택 합니다. 개인 및 프로젝트에 따라
사용 하지 않도록 선택할 수 있습니다. 온라인으로 전환 한 후 백엔드
에 관련 구성이 있어야합니다. 계속해서 Enter 키 를 누르 십시오.

이 신인은 아직 dart-sass를 알지 못하므로
node-sass를

선택하여 각각 ESLint 자동 코드 서식 감지 를 선택하십시오. 방지 전용, 에어 비앤비 구성, 라벨 구성, 최대 구성, 여기에서 하나 의 울트라 하이 왼쪽 후면 구성

선택 코드 감지 타이밍을 선택하고, 코드를 저장할 때 여기에서 테스트를 선택

하면 구성 파일이 pakage.json 단독으로 또는 별도의 파일로 변경됩니다. 에서 개별 파일을 선택할 수있는 경우

위의 사전 설정 구성 설정이 저장되었는지 여부를 지 웁니다 . 여기에서는 필요하지 않습니다. 프로젝트를 만들 때마다 다시 선택하는 것이 번거롭지 않습니다. 곧 선택할 것입니다. n을 입력하십시오.

오류가보고되면
당황 하지 말고

node_modules를 삭제하십시오.

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

cnpm i를 사용하여 종속성을 다시 다운로드합니다.

3. 프로젝트를 실행합니다.

yarn serve

이 URL을 브라우저에 복사합니다

. 4. 지금까지 성공했습니다. babel.config.js
가 없으면 아래에서 babel.config.js를 구성 하십시오.

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

설치에 성공하면 파일이 생성됩니다. babel-config.js
다음 구성 요소 파일이 요청시로드됩니다.

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中添加插件

待更新