vite + vue 新建h5项目 路由步骤

参考的几个网站：

1. vite官网地址

1. 找个空目录cmd打开黑窗口（终端）   初始化项目

    

   （我直接用的第二个 vite+vue 大家可以根据项目自行选择；参考vite官网 有快速开始）

2.  输入指令之后会出现选项，自行根据项目选择；

3. 输入绿色的代码来安装依赖包并启动项目（上图用红框的三个指令 依次输入）然后会出俩本地地址，打开地址；就是新建的一个项目了；

二.配置路由

1.  用vscod打开项目 目录结构如下

    

2. 新建views 文件夹；views 文件夹下新建两个文件 login.vue 和 register.vue

3. login.vue 

   <template>
     <div>
       现在是 login 是登录页面
       <router-link to="/views/register">跳转注册页面</router-link>
     </div>
   </template>
   
   <script>
   export default {
     name: 'login'
   }
   </script>
   
   <style scoped></style>
   

    4.register.vue 

    5. 新建router文件夹、index.js和router.js文件 

   6. index.js 

   7.router.js  

    

三、改造App.vue文件和main.js文件

 

 四、安装vue-router

npm install vue-router@4   参考官网 vue-router官网

五、vite.config.js 的配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { fileURLToPath, URL } from 'node:url'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'

const srcPath = path.resolve(__dirname, 'src').replace(/\\/g, '/')
export default defineConfig({
  plugins: [
    vue(),
    // svg 配置
    createSvgIconsPlugin({
      // 指定要缓存的文件夹
      iconDirs: [`${srcPath}/assets/icons`],
      // 指定symbolId格式
      symbolId: 'icon-[name]'
    }),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  //静态资源服务的文件夹
  publicDir: 'public',
  base: './',
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '@_c': path.resolve('src/components')
    },
    // 导入时想要省略的扩展名列表
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
  },
  //预览设置  npm run build　打包之后，会生成dist文件 然后运行npm run preview；vite会创建一个服务器来运行打包之后的文件
  preview: {
    port: 4000, //端口号
    host: 'localhost',
    open: true //是否自动打开浏览器
  },
  //开发配置  npm run dev
  server: {
    port: 3001, //端口号
    strictPort: true, //是否是严格的端口号，如果true，端口号被占用的情况下，vite会退出
    host: 'localhost',
    cors: true, //为开发服务器配置 CORS , 默认启用并允许任何源
    https: false, //是否支持http2 如果配置成true 会打开https://localhost:3001/xxx;
    open: true, //是否自动打开浏览器
    // 反向代理 跨域配置
    proxy: {
      '/api': {
        target: 'https://xxxx.com/',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  },
  // 打包配置 npm run build
  build: {
    //指定输出路径
    outDir: 'dist',
    //生成静态资源的存放路径
    assetsDir: 'assets',
    //小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项
    assetsInlineLimit: 4096,
    //启用/禁用 CSS 代码拆分
    cssCodeSplit: true,
    //构建后是否生成 source map 文件
    sourcemap: false,
    //自定义底层的 Rollup 打包配置
    rollupOptions: {
      input: {
        //可以配置多个，表示多入口
        index: path.resolve(__dirname, 'index.html')
        // project:resolve(__dirname,"project.html")
      },
      output: {
        // chunkFileNames:'static/js/[name]-[hash].js',
        // entryFileNames:"static/js/[name]-[hash].js",
        // assetFileNames:"static/[ext]/name-[hash].[ext]"
      }
    },
    //默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。
    emptyOutDir: true,
    //chunk 大小警告的限制
    chunkSizeWarningLimit: 500
  }
})