工程信息
- 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目录
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 页面空白
解决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')
}
]
},
]
效果图
如果是vite创建的工程
非根嵌套路径部署 比如路由:
- vite配置 目的是在build生成的index.html的资源前缀加上 /pfx
export default defineConfig({
base: process.env.NODE_ENV === "development" ? "/" : "/pfx/" , // 默认 '/'
build:{
outDir: 'pfx', // 默认是 'dist'
}
})
- 路由配置 目的是路由内部跳转自动添加前缀 /pfx
/**
* 保持和vite配置一致
* 在production模式下,内部路由自动跳转前缀为 /pfx
* 在development模式下,默认前缀为 /
*
*/
const base = (process.env.NODE_ENV === "development" ? "/" : "/pfx/");
const router = createRouter({
history: createWebHistory(base),
routes
})
- nginx配置
location /pfx {
alias /Users/dream/person/start/start-vue/demo-vue3-vite/pfx/;
index index.html;
try_files $uri $uri/ /pfx/index.html;
}
最后效果同上