Vue3+Vite+Nginx项目新增环境配置文件以及多项目部署

src同级创建环境配置文件

.env.production
.env.development

.env.production

# .env.production
VITE_ENV = 'production'
VITE_APP_BASE_URL= ''

VITE_APP_ROUTER = '/moveproject'

.env.development

# .env.development
VITE_ENV = 'development'
VITE_APP_BASE_URL= 'http://localhost:9001'

VITE_APP_ROUTER = ''

history路由模式

index.ts路由文件改造

//createWebHistory填写参数 import.meta.env.VITE_APP_ROUTER

//不同情况下

//development

//import.meta.env.VITE_APP_ROUTER = ""

//production

//import.meta.env.VITE_APP_ROUTER = "/moveproject"

完整例子：

import { RouteRecordRaw, createWebHistory, createRouter } from "vue-router"

const routes: RouteRecordRaw[] = [
    {
        path: "/",
        name: 'firstPage',
        component: () => import('@/page/firstPage/index.vue'),
        meta: {
            title:"快点我"
        }
    },
    {
        path: "/home",
        name: 'home',
        component: () => import('@/page/home/index.vue'),
        meta: {
            title:"move"
        } 
    }
]
const router=createRouter({
    history:createWebHistory(import.meta.env.VITE_APP_ROUTER),
    routes
})
router.beforeEach((to: any, _from, next)=>{
    document.title = to.meta.title || ''
    next()
})
export default router

vite.config.ts改造

使用defineConfig回调函数获取mode

修改base：

开发模式使用"./"

生产环境使用"/moveproject/" (nginx下html文件夹下的目录)

注意：此处为"/目录名字/" 不是"/目录名字"

VITE_ENV==="development"?'./':"/moveproject/"

完整例子：

import { defineConfig,loadEnv } from "vite"
import vue from "@vitejs/plugin-vue"
import { join } from "path"
import Components from "unplugin-vue-components/vite"
import { VantResolver } from "@vant/auto-import-resolver"
import postcsspxtoviewport from "postcss-px-to-viewport-8-plugin"

export default defineConfig(({mode})=>{
    const env  = loadEnv(mode, './')
    const VITE_ENV = env.VITE_ENV
    console.log(VITE_ENV)
    return {
        plugins: [
            vue(),
            Components({
                resolvers: [VantResolver()]
            })
        ],
        base: VITE_ENV==="development"?'./':"/moveproject/",
        resolve: {
            alias: {
                "@": join(__dirname, "src") //需要配合tsconfig.json文件配置baseUrl和paths设置src别名@
            }
        },
        css: {
            postcss: {
                // //rem的适配方案，需要下载插件
                // plugins: [
                //   postCssPxToRem({
                //     rootValue: 37.5, // 1rem的大小 以375px原型图为基准
                //     propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
                //   })
                // ],
                // //vw的适配方案，需要下载插件
                plugins: [
                    postcsspxtoviewport({
                        unitToConvert: "px", // 要转化的单位
                        viewportWidth: 375, // UI设计稿的宽度
                        unitPrecision: 2, // 转换后的精度，即小数点位数
                        propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
                        viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
                        fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
                        selectorBlackList: ["ignore-"], // 指定不转换为视窗单位的类名，
                        minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
                        mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
                        replace: true, // 是否转换后直接更换属性值
                        // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
                        exclude: [],
                        landscape: false // 是否处理横屏情况
                    })
                ]
            }
        },
        server: {
            port: 3001, // 服务端口号
            open: true, // 服务启动时是否自动打开浏览器
            cors: true, // 允许跨域
            //配置代理
            proxy: {
                "/api": {
                    target: "http://localhost:9001",
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/api/, "")
                }
            }
        },
        // define: {
        //     "process.env": {}
        // },
        build: {
            target: "modules",
            outDir: "dist", //指定输出路径
            assetsDir: "assets", // 指定生成静态资源的存放路径
            minify: "terser" // 混淆器，terser构建后文件体积更小
        },
        publicDir: "public"
    }
})

nginx改造

新增：

location /moveproject {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /moveproject/index.html;
}

新增后代码如下：

location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
}
location /moveproject {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /moveproject/index.html;
}