在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
最近在用 nuxt.js 做服务端渲染vue页面，想做这样的一个功能，浏览器向nuxt.js 渲染服务器发送请求，nuxt.js 服务器将请求携带的参数渲染到返回页面上。比如：在浏览器地址栏输入
show， nuxt服务器返回 i show
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
比如你的地址是：
那么，你在 /pages/doc/文件夹下面创建一个文件 _id.vue
里面有这个
export default {
asyncData ({ params, env, error }) {
console.log(env, params);
return {name:'d', number:'f'}
那么会输出
{ id: '234' }
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
每个请求的参数都可以在服务端获取，获取之后传入你的组件
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
链接地址：:3000/News?pageIndex=2
async asyncData ({context, route}) {
let pageIndex = (route.query.pageIndex == null ? 1 : route.query.pageIndex)
pageIndex的参数能正常读出来。希望能帮到你
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。在 Nuxt.js 中怎么使用vux_百度知道
在 Nuxt.js 中怎么使用vux
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
hefeixinhua9知道合伙人
来自电脑网络类芝麻团
hefeixinhua9
采纳数：627
获赞数：285
参与团队：
把this换成Vue就好了Vue.$vux.alert.show({title: '哎呀！',content: '您的信息还在审核中',});
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。2.7k 次阅读
经过几个周六周日的尝试，终于解决了服务端渲染中的常见问题，当SEO不在是问题的时候，或许才是我们搞前端的真正的春天，其中也遇到了一些小坑，Nuxt.js官方还是很给力的，提issue后很积极的给予帮助，再次感谢Nuxt.js的开发团队。
第一个拦路虎就是登陆时候的鉴权问题，如何把token保存到本地。官方使用express-session解决这个问题，但是这样做后端也需要使用nodejs,而我们公司使用的PHP。转念一想或许cookie可以一试，于是我是这样做的：
app.post('/api/login', function (req, res) {
// 后台验证用户信息，并返回token
async function login () {
const { data } = await axiosServer.post('/login', req.body)
return data
login().then(function (data) {
// 把token存储到cookie中
const { token } = data
if (token) {
res.cookie('token', token, {
maxAge: 60000 * 60 * 24
// 原封不动返回
return res.json(data)
我把登录请求用nodejs做了一次转发，把用户提交的数据传给后端，后端返回的token设置到cookie里，然后把数据返会给前端，前端再用vuex保存token状态，这样token同时存在于cookie和内存里，刷新页面也是正常的前端存储token:
async nuxtServerInit ({ dispatch, commit }, { req, res }) {
if (req.cookies && req.cookies.token) {
// 存储token
commit('SET_USER', req.cookies.token)
// SET_USER
SET_USER (state, token) {
state.token = token
于是这个问题就这样解决了，所有需要存储到本地的数据都可以这样做来解决
渲染组件内的数据
另一个小问题是components里数据如何渲染。在Nuxt.js中只有page里的组件有fetch和asyncData方法，所以当我们使用layout布局页面时如果组件需要请求数据，就无法渲染了，解决方法是在nuxtServerInit方法里初始化组件内的数据，如下：
async nuxtServerInit ({ dispatch, commit }, { req, res }) {
// 初始化组件内的数据
await dispatch('ADMIN_INFO')
await dispatch('TAGS')
await dispatch('ARCHIVES')
这样组件内的数据也可渲染成功了
过滤器的使用
Nuxt.js的plugins设计的个人感觉还是很人性化的，用起来简直是不能再简单。在plugins新建一个filters.js，过滤器可以这样玩：
import Vue from 'vue'
// 时间格式化
export function formatDate (date, fmt) {
let newDate = new Date(date)
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (newDate.getFullYear() + '').substr(4 - RegExp.$1.length))
'M+': newDate.getMonth() + 1,
'd+': newDate.getDate(),
'h+': newDate.getHours(),
'm+': newDate.getMinutes(),
's+': newDate.getSeconds()
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + ''
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
return fmt
let filters = {
formatDate
Object.keys(filters).forEach(key =& {
Vue.filter(key, filters[key])
export default filters
然后在nuxt.config.js中注册一下：
plugins: [
'~plugins/filters.js'
在组件中就可以这样happy的用起来了：
&!-- 时间格式化 --&
&span&{{date | formatDate('yyyy-MM-dd')}}&/span&
比如说用户未登录状态下，通过路由闯入了需要鉴权的页面，我们可以自定义一些错误：
// auth.js
export default function ({ store, error }) {
// 可通过组件的props接收error信息
if (!store.state.token) {
message: 'cookie失效或未登录，请登录后操作',
statusCode: 403
在组件中使用该中间件：
export default {
middleware: 'auth',
// 还可以把用户重定位到登录页
fetch ({redirect, store}) {
if (!store.state.token) {
redirect('/login')
多级路由嵌套
官方说这种情况用的较少，但是我发现用的挺多的，比如说不同分类又有不同分页，这样分类和分页都要是动态路由，如图所示：编译后的结果：
大概在8月份时候，写了几篇关于如何的文章，回头看写的果然比较菜，随着时间推移，修复了一些错误，发现了一些错误，整体写的太乱。于是抽了一天时间，在新的服务器上一边实践一边记录，把上面几篇文章用汇总了一下，不在这里展开了，太长了，增加了自动部署的相关内容
以上所有的实践代码都在，这个小项目是我在几月前写的，后来用Nuxt.js进行了重构！
5 收藏&&|&&12
session 同步问题 还没解决
session 同步问题 还没解决
那权限问题该如何解决
那权限问题该如何解决
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。14分享收藏在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
文档原话：服务端渲染应用部署
部署 Nuxt.js 服务端渲染的应用不能直接使用 nuxt 命令，而应该先进行编译构建，然后再启动 Nuxt 服务，可通过以下两个命令来完成：
nuxt build
nuxt start
打包后能运行，但dist目录下没有index.html页面，请问如何部署到ubuntu服务器上？
今天搞知道nuxt.js,觉得很神奇，有知道咋部署的吗？？之前不是服务端渲染那种，直接build后丢到nginx就可以了。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我是题主，看见很多人问我再回答下我现在的部署方式。
目前我公司的代码都是放到gitlab，部署到docker容器1，在服务端安装node镜像，代码根目录有个Dockerfile文件。
Dockerfile
RUN mkdir -p /home/blog
WORKDIR /home/blog
COPY . /home/blog
RUN yarn install
RUN npm run build
EXPOSE 3000
CMD ["npm", "start" ]
2，在服务器克隆代码，进入根目录运行下面脚本，loozb-blog为项目名称
echo "开始构建"
docker build -t loozb-blog .
docker run -p 82:3000 --name loozb-blog -d loozb-blog
上面就是用容器部署的方法，构建镜像的时候执行下载依赖，打包，启动。也可以提前构建个已经安装好依赖的镜像，这样不用每次启动就安装依赖了。
不用容器部署的话也很简单，服务器安装node，克隆代码，然后安装依赖，构建，启动执行就可以。
之前是把文件从本机复制到服务器运行，感觉太麻烦，现在直接克隆全部代码一样的。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
文档的下面还有一个命令的
静态应用部署Nuxt.js 可依据路由配置将应用静态化，使得我们可以将应用部署至任何一个静态站点主机服务商。
可利用下面的命令生成应用的静态目录和文件：
npm run generate这个命令会创建一个 dist 文件夹，所有静态化后的资源文件均在其中。
使用静态应用部署应该会丢失服务器渲染的优势吧
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。}