初次接触nuxt.js
- vuex状态保存篇
在传统页面中, 我们可以把vuex保存在sessionStorage中, 但是Nuxt.js使用的是服务端渲染, 因此并不存在window对象。
既然这样, 我们该怎么办, 百度了一大堆, 没找到解决方法, 最后在官网看了一下。
在'nuxt.js官网 , 搜索 asyncData
;
'
在里面, 我们可以找到 req这个变量。
req, 是请求对象, 里面存在header, 我们的cookie就会保存在里面。
在asyncData中, req.headers 传递给this然后在Mounted里面打印出来, 就是下面的内容
accept
:
"text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8"
accept-encoding
:
"gzip, deflate"
accept-language
:
"zh-CN,zh;q=0.9"
cache-control
:
"no-cache"
connection
:
"keep-alive"
cookie
:
"BL_T_PROV=; SL_G_WPT_TO=zh-CN; SL_GWPT_Show_Hide_tmp=1; SL_wptGlobTipTmp=1; BL_D_PROV=; token=226c6078f274381d2efe8ecd54cc581f"
host
:
"10.10.1.188:3000"
pragma
:
"no-cache"
referer
:
"http://10.10.1.188:3000/m/person/myEssay/1"
upgrade-insecure-requests
:
"1"
user-agent
:
"Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"
在这里, 我们看到了我们设置的token; 既然这样, 我们可以在这里面拿到cookie。
async asyncData ({ params, store , req}) {
let token = b_getToken(req)
}
const b_getToken = function(req = {}) {
if (req.headers && req.headers.cookie) {
var req_Cookies = req.headers.cookie.split("; ")
let tokens = ''
req_Cookies.forEach(v => {
if (v.indexOf("token=")>=0) {
tokens = v
}
})
return tokens.split('=')[1]
} else {
return ''
}
}
这样我们就拿到服务端的cookie了,
但是我发现一个问题, 在刷新的时候, 是可以从服务器拿到cookie, 但是当我们直接跳转页面, 却拿不到cookie了,
这样我们需要在请求里面再次做一些修改
在axios请求拦截里面, 我们判断, 如果在客户端, 就从客户端拿到cookie, 否则的话, 我们从服务器那cookie;
// 添加请求拦截器
instance.interceptors.request.use(
function(config) {
if (config.headers) {
let cookie = config.headers['X-Auth0-Token'] || ''
const token = process.client ? getCookie('token') : cookie
config.headers["X-Auth0-Token"] = token
}
// 在发送请求之前做些什么
return config
},
function(error) {
// 对请求错误做些什么
return Promise.reject(error)
}
)
- 服务器部署篇
从package.json里面, 我们可以看到有以下几个命令。
"scripts": {
"dev": "nuxt",
"build": "nuxt build", // 打包压缩到.nuxt/dist
"start": "nuxt start", // 运行(build后的内容并启动服务器)
"generate": "nuxt generate", // 生成静态文件。
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
做一个ssr项目, 我刚开始, 竟然使用generate
命令, 结果导致文件放上去后, 刷新页面出现了404未找到页面错误
。后面才发觉, 原来服务端渲染, 是要在服务端运行Nuxt框架的Node, 这是它框架的服务端渲染, 而generate
是静态文件。
既然这样, 我们就按照他们的来。
我们先执行build命令, 执行完毕后, 我们复制以下几个目录并放到服务器。
.nuxt
static
nuxt.config.js
弄好后, 我们先看看nuxt.js官网, 找到发布部署-----服务端渲染应用部署
这里。
然后复制package.json
内容并加到package.json文件内。 然后我们把package.json加入到上面提取出来的文件中。
package.json
{
"name": "my-app",
"dependencies": {
"nuxt": "latest"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
}
}
之后, 我们在服务端部署Node, 并npm install, 之后我们就可以npm run start; 然后我们就算是部署成功了。
- 路径篇。
我们部署到服务器, 一般测试环境下面, 都会有几个子目录名字, 而nuxt.js打包出来的, 却是绝对路径。
这里我们以 ‘/m’为例。
比如我们的测试环境是 '127.0.0.1:80/m' ; 然而我们打印后的文件, 却并不存在'/m'这个目录, 这时候我们需要手动给他添加上。
下面是 nuxt.config.js
的代码。
const path = require('path')
const merge = require('webpack-merge')
const pkg = require('./package')
const routerPath = '/m'
const webpack = require("webpack")
module.exports = {
mode: 'universal',
head: {
title: '尖锋咖',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' },
{ name: "renderer", content: "webkit" },
{ name: "force-rendering", content: "webkit" },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: `${routerPath}/favicon.ico` },
{ rel: 'stylesheet', href: `${routerPath}/css/base.css` }
],
script: [
{
src: `${routerPath}/js/lib-flexible.js`, type: 'text/javascript', charset: 'utf-8'
},
{
src: 'http://dup.baidustatic.com/js/ds.js', type: 'text/javascript', charset: 'utf-8'
},
{
src: `${routerPath}/js/weixin-1.4.0.js`, type: 'text/javascript', charset: 'utf-8'
},
{
src: `${routerPath}/js/vconsole.min.js`, type: 'text/javascript', charset: 'utf-8'
},
]
},
loading: { color: '#fff' },
css: [
],
plugins: [
{
src: "~plugins/vant.js"
},
{
src: "~plugins/VueQuillEditor.js",
ssr: false
}
],
modules: [
'@nuxtjs/axios'
],
/*
** Axios module configuration
*/
axios: {
// See https://github.com/nuxt-community/axios-module#options
},
// router: {
// base: '/app/'
// },
/*
** Build configuration
*/
router: {
base: `${routerPath}/`,
scrollBehavior: function (to, from, savedPosition) {
return { x: 0, y: 0 }
},
},
build: {
/*
** You can extend webpack config here
*/
publicPath: '',
extend(config, ctx) {
// Run ESLint on save
if (ctx.isDev && ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
},
postcss: [
require('postcss-px2rem')({
remUnit: 75
})
],
/*
** You can extend webpack config here
*/
extend(config, ctx) {
// console.log('extend', config, ctx)
config.resolve = merge(config.resolve, {
alias: {
'components': path.resolve(__dirname, 'components'),
'assets': path.resolve(__dirname, 'assets'),
'pages': path.resolve(__dirname, 'pages'),
'http': path.resolve(__dirname, 'http'),
'utils': path.resolve(__dirname, 'utils'),
'store': path.resolve(__dirname, 'store')
}
})
},
plugins: [
new webpack.ProvidePlugin({
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js'
})
]
}
}
我们先看 const routerPath = '/m'
这里配置一个动态路径, 以方便我们修改。
然后在Link 和 scripts里面再进行修改
这里给它添加了/m这个路径, 结果就是'127.0.0.1:80/m/favicon.ico'这样的路径了。
link: [
{ rel: 'icon', type: 'image/x-icon', href: `${routerPath}/favicon.ico` },
{ rel: 'stylesheet', href: `${routerPath}/css/base.css` }
],
script: [
{
src: `${routerPath}/js/lib-flexible.js`, type: 'text/javascript', charset: 'utf-8'
},
]
然后继续修改路径路径
我们的路由是 '127.0.0.1:80/m/index'
但是打包后的却是'127.0.0.1:80/index'
所以我们需要修改router配置
看下面代码, 我们给它加上Base, 这里的作用是, 给所有Nuxt-link
标签和$router.push()
都添加上'/m'; 所以最后我们访问的地址, 就变成了 '127.0.0.1:80/m/index'
router: {
base: `${routerPath}/`,
scrollBehavior: function (to, from, savedPosition) {
return { x: 0, y: 0 }
},
},
最后: 我们打包(build) 后, 把文件放在服务器上, 但是, 在放到服务器之前, 我们还需要修改nuxt.config.js
,
这里,我需要打包后再修改routerPath
const routerPath = ''
然后运行 npm run start 就正式启动了服务端了。
注意: build.publicPath
是配置资源路径的, 在这里我们已经把文件放到了/m
目录下了, 所以它的路径是没问题的,不需要在修改。
- 抽离篇
在做seo的时候, 需要把图片和样式和js都抽离出来, 这时候, 我们可以用nuxt.js官网提供的方法
nuxt.js提供的抽离css路径
在build里面加上extractCSS、publicPath、filenames
代码就好了。
build: {
extractCSS: { allChunks: true }, // css 独立打包 link 的形式加载
publicPath: '/sample/assets/', //sample/essays 打包的默认路径为 ‘_nuxt’ 或者可以指定cdn 域名
filenames:{ // css 和 js img 打包时指定文件夹
app: ({ isDev }) => isDev ? '[name].js' : '[chunkhash].js',
chunk: ({ isDev }) => isDev ? '[name].js' : '[chunkhash].js',
css: ({ isDev }) => isDev ? '[name].js' : '[contenthash].css',
img: ({ isDev }) => isDev ? '[path][name].[ext]' : '[hash:7].[ext]'
}
}