nuxt 靜態部署 常見問題
1.路由 使用 history 模式 打包會出現包一層文件夾
// 在generate 內設置 subFolders: false,
2.設置頁面切換動畫
transition:{
name:'page',
mode:'out-in'
},
3.插件需要在 plugins 內
plugins: [
'@/plugins/element-ui',
{ src: '~/plugins/storeCache.js', ssr: false },
{ src: '~/plugins/vue-lazyload.js', ssr: true },
{ src: '~/plugins/swiper.js', ssr: false },
'~/plugins/utils.js'
],
css: [
'element-ui/lib/theme-chalk/index.css',
'~assets/css/reset.scss',
'~assets/font/iconfont.css',
'swiper/css/swiper.css'
],
或者直接使用 hash 模式 進行 npm run generate 后 直接將生成dist 文件放入服務器上
大概配置如下
const axios = require('axios');
console.log(process.env.NODE_ENV,'ceshi')
export default {
generate: {
//不生成文件夾,直接生成 html
subFolders: false,
routes: function() { // 自定義預渲染路由
return [
'xxx',
]
},
crawler:false
},
// Target: https://go.nuxtjs.dev/config-target
// target: 'static',
router: {
base: './',
mode: 'history',
},
// 頁面切換動畫
transition:{
name:'page',
mode:'out-in'
},
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'XXXX',
htmlAttrs: {
lang: 'en'
},
meta: [
// { charset: 'utf-8' },
// pc在移動端縮放
{ name: 'viewport', content: 'width=1200px,user-scalable=yes'},
{ name: 'format-detection', content: 'telephone=no' },
{ name: 'renderer', content: 'webkit'},
{ name: 'force-rendering', content: 'webkit'},
{ 'http-equiv': 'X-UA-Compatible', content: 'IE=Edge,chrome=1'},
{ name: 'baidu-site-verification', content: 'mREHhDF8nW'},
{ name: 'apple-mobile-web-app-capable', content: 'yes'},
{ name: 'apple-mobile-web-app-status-bar-style', content: 'white'},
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: './favicon.ico' }
],
script:[
// cdn
{
src: "https://cdn.bootcdn.net/ajax/libs/vue-lazyload/1.3.3/vue-lazyload.js"
},
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
'element-ui/lib/theme-chalk/index.css',
'~assets/css/reset.scss',
'~assets/font/iconfont.css',
'swiper/css/swiper.css'
],
// 插件
plugins: [
'@/plugins/element-ui',
{ src: '~/plugins/storeCache.js', ssr: false },
{ src: '~/plugins/vue-lazyload.js', ssr: true },
{ src: '~/plugins/swiper.js', ssr: false },
'~/plugins/utils.js'
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [],
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
/**
* 將查看源代碼中的css采用外部引入方式
*/
extractCSS: {
allChunks: true
},
vender: ['axios'],
transpile: [/^element-ui/],
css: {
preprocessorOptions: {
scss: {
api: 'modern-compiler'
}
}
},
extend(config, ctx) {
// Run ESLint on save
if (ctx.isClient) {
//忽略打包
// config.externals = {
// "vue-lazyload": "VueLazyload"
// };
}
},
}
}
用 無 所 謂 的 態 度 過 好 隨 遇 而 安 的 生 活↗☆

浙公網安備 33010602011771號