工程信息
- 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"
根路徑部署
也就是整個資源部署到 / 根路徑下
打包
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 語法 空白"
https://github.com/vuejs/vue-cli/issues/6282
這裏找到一個答案： 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:[email protected]",
}
非根路徑部署
也就是整個資源部署到 /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')
}
]
},
]