vue3和vite_vue3 vite publicpath

作者：笔触狂放9 | 2024-03-30 03:10:39

踩

vue3 vite publicpath

1、安装 vue-cli 3

yarn add vue-cli@next
1

2、安装vite

vue add vite
1

3、安装成功后package.json中会添加

"scripts": {
        "vite": "node ./bin/vite"
    }
"devDependencies": {
    "vue-cli-plugin-vite": "~1.5.0"
  }
  把scripts里的serve 和 build 改成vite
  "scripts": {
    "serve": "vite",
    "build": "vite build",
    "lint": "vue-cli-service lint",
    "vite": "node ./bin/vite"
  },
1
2
3
4
5
6
7
8
9
10
11
12
13

4、通过@vitejs/plugin-vue插件来支持Vue

yarn add @vitejs/plugin-vue
1

5、安装路由

cnpm install --save vue-router@next
1

6、在入口文件里初始化vue实例，并引入所需要的插件

找到main.js文件，引入路由插件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import axios from 'axios'

createApp(App).use(router).mount('#app')
1
2
3
4
5
6

7、在index.html中载入main.js

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
    <style>
    </style>
  </head>
  <body>
    <div id="app">
      <h1>正在加载中......</h1>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

8、App.vue

找到src底下的App.vue文件，此文件是项目的主组件，所有页面都是在App.vue下进行切换的。在App.vue中添加，用来承载路由组件

<template>
  <div id="app">
    <router-view/>  
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

9、路由配置

在src底下新建文件夹和文件router/index.js，index.js里简单写下路由：

import {createRouter,createWebHistory} from 'vue-router'

const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            path: '/test2',
            component: () => import("../components/test2.vue")
        },
        {
            path: '/',
            name:'home',
            component: () => import("@/components/HelloWorld.vue")
        },
    ]
})

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

10、vite.config.js

在项目最外层新建vite.config.js文件，简单的配置：

import { defineConfig } from "vite";
import { resolve } from "path";
import vue from '@vitejs/plugin-vue';
function pathResolve(dir) {
  return resolve(__dirname, ".", dir);
}

export default defineConfig({
    base: "",
    plugins:[vue()],
    // 配置文件别名
    resolve: {
        alias: {
          "@": pathResolve('src'),
        }
    },
    // 打包配置
    build: {
        target: 'modules',
        outDir: 'dist', //指定输出路径
        assetsDir: 'static', // 指定生成静态资源的存放路径
    },
    // 本地运行配置，及反向代理配置
    server: {
        cors: true, // 默认启用并允许任何源
        open: true, // 在服务器启动时自动在浏览器中打开应用程序
        proxy: {
            '/api': {
                target: 'http://192.168.0.2:8080', 
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
          }
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

11、启动项目

启动：yarn serve、npm run serve
打包：yarn build、npm run build
1
2

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/338780