项目打包

1. vue.2.0 (webpack)打包配置

   第一步
   vue.config.js
    module.exports = {
       publicPath: './',
     }
   第二步
   route文件
   onst router = new VueRouter({
     mode: 'history', 把history改为hash
     base: process.env.BASE_URL,
     routes
   })
   

   　　

   　　

2. vue3.0 (webpack)打包配置

   第一步
   vue.config.js
    module.exports = {
       publicPath: './',
     }
   第二步
   route文件
   
   const router = createRouter({
     history:createWebHashHistory(process.env.BASE_URL), 修改为createWebHistory(process.env.BASE_URL), 
     routes
   })
   

   　　

   　
3. vue3.0(vite)打包配置

   第一步
   const router = createRouter({
     history: createWebHashHistory("/"),
     routes
   })
   第二步
   vite.config.js文件
   import { defineConfig,loadEnv } from 'vite'
   import { resolve } from 'path'
   
   // 输入环境变量 输出当前“模式”对应值
   const getEnvValue = function (env: string) {
     // 启动Node进程时传入的命令行参数 so运行命令结尾应为“模式”
     const modeVariable = _.last(process.argv)
     // 输出“模式”内配置的环境对象
     const variableObject = loadEnv(modeVariable, process.cwd())
     return variableObject[env]
   }
   // 使用
   
   import vue from '@vitejs/plugin-vue'
   import postCssPxToRem from "postcss-pxtorem";
   import * as _ from 'lodash'
   export default defineConfig({
     plugins: [
       vue(),
     ],
   css:{
     postcss: {
       plugins: [
         postCssPxToRem({
           rootValue: 16, // 1rem的大小
           propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
         })
       ]
     },
   },
     // base: process.env.NODE_ENV === 'production' ? './' : '/',
   
     alias: {
       // 配置目录别名
       '@': resolve(__dirname, 'src'),
       'views': resolve(__dirname, 'src/views'),
       'utils': resolve(__dirname, 'src/utils'),
     },
   
     // 开发服务器配置
     server: {
       host: true,
       open: true,
       port: 3000,
       proxy: {
         '/api': {
           target: getEnvValue('VITE_APP_BASEAPI'),
           changeOrigin: true,
           ws: true,
           secure: true,
           rewrite: (path) => path.replace(/^\/api\//, ''),
         }
       }
     },
   })
   

   　　

4. react(vite）打包配置

   第一步
   vite.config.ts
     base:'./',
   第二步
   写成HashRouter模式
   import { HashRouter as Router, Route, Switch, Link } from "react-router-dom";
   

   　　

5. react(webpack）打包配置

   第一步package.json
   增加
   {
   "homepage": "./",
   }
   第二步
   写成HashRouter模式
   import { HashRouter as Router, Route, Switch, Link } from "react-router-dom";　　

6. uniapp(h5)打包配置

   第一步vite.config.ts
    base: './',
   

   　　

7. uniapp(安卓打包）微信收藏