初次接触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]'
}
}