vue3+ts+vite+nginx部署探索

8,307 阅读2分钟

工程信息

  • vue-cli: @vue/cli 4.5.13
  • vue3 : "version": "3.1.4",
  • ts: <script lang='ts' setup> 模式(后改为普通模式)
  • vue-router: "version": "4.0.10",
  • vuex: "version": "4.0.2"
  • vite: "version": "2.4.4",

根路径部署

也就是整个资源部署到 / 根路径下

打包

npm run build

生成dist目录

image-20210805105652849

nginx配置

server {
    listen       7002;
    server_name  localhost;

    # 访问 http://localhost:7002
    location / {
        alias /path/to/demo-vue3-ts-mobile/dist/;
        index  index.html;
        try_files $uri $uri/ /index.html;  
    }

    location /api/ {
        proxy_pass http://localhost:3000/;        
    }    

}

问题1 页面空白

image-20210805105621293

解决1

网上搜索:"vue3 打包 页面空白"

网上有人遇到:将vue-router的mode,从history改为hash

我这边不管用,还是空白,放弃

import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router'
const router = createRouter({
  // history: createWebHistory(process.env.BASE_URL),
  history: createWebHashHistory(),
  routes
})

定位问题

@app.vue 新增一段内容

<template>
  app test
  <router-view/>
</template>

打包后,"app test" 显示, router-view 内容没有显示
=》 因此问题出在vue-router加载上

将没有问题的route配置进行替换,依然空白
=》router配置没有问题

将home.vue文件的setup模式去除,改为普通模式
重新打包后,页面竟然可以了!!!
=》 setup模式导致的

// setup模式
<script lang="ts" setup>
import Test21 from '@/components/test2.mobile.vant/test1.vue'
</script>
// 普通ts模式
<script lang="ts">
// mobile + vant
import Test21 from '@/components/test2.mobile.vant/test1.vue'

import { defineComponent,PropType } from "vue";
export default defineComponent({
  components:{
    Test11, Test12, Test13,
    Test21
  }
})
</script>

解决2

虽然知道原因了,推论应该是script setup 这个语法打包没有解析成功
检查tsconf.json 没有发现问题
检查vue.config.js 没有发现问题

搜索: "vue setup 语法 空白" github.com/vuejs/vue-c…

这里找到一个答案: npm install vue-loader --dev

运行之后:打包页面正常了

查看package.json新增

  • "vue-loader": "^15.9.8",

查看package-lock.json看到

  • 新增vue-loader-v16
  • 之前本身就有vue-loader(15.9.3)
    "vue-loader": {
      "version": "15.9.3",
    }
    "vue-loader-v16": {
        "version": "npm:vue-loader@16.0.0-beta.7",
    }

非根路径部署

也就是整个资源部署到 /pfx 路径下
有时1台ng可能会部署多个生产环境,通过前缀区分,比如/pfx1 /pfx2

// vue.config.js 非根路径部署 
publicPath: process.env.NODE_ENV === "development" ? "/" : "/pfx/" , // 默认 '/'
outputDir: 'pfx', // 默认是 'dist'
# not-working!!
location /pfx {
    alias /path/to/demo-vue3-ts-mobile/pfx/;
    index  index.html;
    try_files $uri $uri/ /pfx/index.html;  
}

结果
测试过程出现同样的问题,页面空白,资源没有404,控制没有报错
这次是真的不知道怎么办了!! [掩面哭泣.png]
🙋有人知道怎么解决吗?

和之前同样的方式发现还是 script-setup模式的原因导致的
需要改为普通模式,重新打包,一切正常!!!
然鹅,本人更喜欢script-setup模式,语法更加简明

<script lang='ts' setup>
</script>
// 改为
<script lang='ts'>
</script>

非根嵌套路径部署

比如路由:

其中:

  • pfx是Nginx设置的路由前缀(production模式才有,development模式没有)
  • task/list 等是vue-router内部路由嵌套

使用普通模式,没有遇到什么问题,比较顺利

// 路由嵌套配置
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
  },{
    path: '/task',
    component: BaseLayout,
    children:[
      {
        path: 'list',
        name: 'TaskList',
        component: () => import(/* webpackChunkName: "tasklist" */ '../views/task/list.vue')
      },{
        path: 'result',
        name: 'TaskResult',
        component: () => import(/* webpackChunkName: "taskresult" */ '../views/task/result.vue')
      }
    ]
  },
]

效果图

deploy-result-vue3-ts

如果是vite创建的工程

非根嵌套路径部署 比如路由:

  1. vite配置 目的是在build生成的index.html的资源前缀加上 /pfx
export default defineConfig({
  base: process.env.NODE_ENV === "development" ? "/" : "/pfx/" , // 默认 '/'
  build:{
    outDir: 'pfx', // 默认是 'dist'  
  }
})
  1. 路由配置 目的是路由内部跳转自动添加前缀 /pfx
/**
 * 保持和vite配置一致 
 * 在production模式下,内部路由自动跳转前缀为 /pfx
 * 在development模式下,默认前缀为 /
 * 
 */
const base = (process.env.NODE_ENV === "development" ? "/" : "/pfx/"); 
const router = createRouter({
  history: createWebHistory(base),
  routes
})
  1. nginx配置
location /pfx {
    alias /Users/dream/person/start/start-vue/demo-vue3-vite/pfx/;
    index  index.html;
    try_files $uri $uri/ /pfx/index.html;  
}

最后效果同上