nuxt记录与坑

开源地址:https://github.com/adtkcn/express_nuxt

在linux下nuxt build没成功。。。目前是在window下build拷贝.nuxt目录过去。。。
在head中有外链script的页面中,不能使用路由

在nuxt中使用axios:https://axios.nuxtjs.org/usage.html

安装两个模块 

npm i --save @nuxtjs/axios @nuxtjs/proxy

module.exports = {
    modules: ["@nuxtjs/axios", "@nuxtjs/proxy"],
    axios: { proxy: true, retry: { retries: 3 } },//设置代理。最多重发三次
    proxy: {
        "/api/": {
            target: "http://localhost:3000/api"
        }
    },
}

使用自带的vuex

//vue方法中
this.$store.state.a
this.$store.commit("", {});

//fetch 方法中
  fetch ({ store, params }) {
      store.commit('setStars', res.data)
  }
这俩我用的第一个
if (process.browser) {}
//对于只适合在客户端运行的脚本,需要通过使用 process.BROWSER_BUILD 变量来判断导入
if (process.BROWSER_BUILD) {
  require('external_library')
}

muse-ui服务端按需加载

npm i --save babel-plugin-import webpack-node-externals
module.exports = {
    build: {
        extractCSS: true, 
        babel: {
            plugins: [
                [
                    "import",
                    {
                        libraryName: "muse-ui",
                        libraryDirectory: "lib",
                        camel2DashComponentName: false
                    }
                ]
            ]
        },
        extend(config, { isDev, isClient, isServer }) {
            if (isServer) {      
                config.externals = [nodeExternals({ whitelist: [/^muse-ui/] })];
            }
        }
    },
}

你可能感兴趣的:(nuxt记录与坑)