vuecli-vite-vue3-init 项目架子 快速开发 webpack打包

1|0要vite的开发的快速 和 webpack打包

开发的时候 用vite，可以打包一个本地可以直接双击，不用起服务的代码

2|0这个架子的缺点就是 vite和vuecli 两套双配置

正式公司项目 还是vuecli吧~

3|01. 现件个vuecli的架子

vue create vuecli-vue3-init

得到 package.json

{
  "name": "vuecli-vue3-init",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-standard": "^6.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-vue": "^8.0.3"
  }
}

4|02 生成个vite的架子

文档地址： https://cn.vitejs.dev/guide/#trying-vite-online

执行命令

npm create vite@latest

得到 package.json

{
  "name": "vite-vue3-init",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "vite": "^2.9.9"
  }
}

5|03 已 vuecli-vue3-init 为初始架子 合并 vite-vue3-init

• 创建 vuecli-vite-vue3-init 目录，
• 将 cli的文件 除了 node_modules 以外都copy进去，
• 然后合并 package.json 依赖
• 修改script 运行脚本选项
• 删除 package-lock.json
• 安装依赖 yarn install

经过一通调试 里面有个es5的小插曲，在jsconfig.json 里面的 compilerOptions 的 target 原来是es5，导致vite-dev 不能识别vite.config.js里面的const，最后改成es6了。

6|04 代码提到gitee上 vuecli-vite-vue3-init

贴下最后改的代码

项目名称： vuecli-vite-vue3-init

package.json

{
  "name": "vuecli-vite-vue3-init",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "vuecli-dev": "vue-cli-service serve",
    "vuecli-build": "vue-cli-service build",
    "vuecli-lint": "vue-cli-service lint",
    "vite-dev": "vite",
    "vite-build": "vite build",
    "vite-preview": "vite preview"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vitejs/plugin-vue": "^2.3.3",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-standard": "^6.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-vue": "^8.0.3",
    "vite": "^2.9.9"
  }
}

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: './',
  resolve: {
    // 配置路径别名
    alias: {
      '@': path.resolve(__dirname, 'src'),
      _c: path.resolve(__dirname, 'src/components')
    }
  }
})

vue.config.js

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
const resolve = (dir) => path.join(__dirname, dir)
module.exports = defineConfig({
  publicPath: './',
  transpileDependencies: true,
  // 打包时不生成.map文件
  productionSourceMap: false,
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set('_c', resolve('src/components'))
    config.plugin('html').tap(args => {
      args[0].title = '自定义标题'
      return args
    })
  },
})

jsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
}

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-unused-vars': 'off',
    'no-tabs': 'off',
    singlequote: 'off',
    semi: [2, 'never'],
    'comma-dangle': 0,
    'no-console': 0,
    quotes: [2, 'single'],
    'no-undef': 0,
    'no-debugger': 0,
    'import/no-unresolved': 0,
    'import/extensions': 0,
    'no-param-reassign': 0,
    'vue/multi-word-component-names': 0,
    'vue/no-multiple-template-root': 0,
    'import/no-extraneous-dependencies': 0
  }
}

7|0感谢 viewui-plus 提供的灵感

收工！

__EOF__

本文作者：Reciter
本文链接：https://www.cnblogs.com/pengchenggang/p/16385613.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！