nuxt vue2 ssr

1 nuxt.config.js

const env = require('./env');

let remove_console = []
if (process.env.NODE_ENV === 'production') {
  remove_console.push("transform-remove-console")
}

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  mode: 'universal',
  head: {
    title: 'qq',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    'element-ui/lib/theme-chalk/index.css',
    '@/assets/scss/index.scss'
  ],

  styleResources: {
    scss: ['@/assets/scss/variable.scss']
  },

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    {src:'@/plugins/element-ui',ssr:true},
    {src:'@/plugins/el-drag-dialog',ssr:false}
  ],

  // 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: [
    '@nuxtjs/style-resources',
    '@nuxtjs/proxy'
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: [/^element-ui/],
  },

  proxy:{
    '/bdo/':{
      target: 'http://localhost:8352/', // development
      changeOrigin: true, //是否跨域
      pathRewrite: {
        '^/bdo/': '/'
      },
    },
    '/fay/':{
      target: 'http://localhost:8351/', // development
      changeOrigin: true, //是否跨域
      pathRewrite: {
        '^/fay/': '/'
      },
    }
  }

}

这里引用了一些组件

yarn add @nuxtjs/axios
yarn add @nuxtjs/style-resources@1.0.0
yarn add node-sass@4.14.1 --dev
yarn add sass-loader@10.1.1 --dev

2 布局
nuxt中layouts目录是放布局的

3 nuxt store
启动的时候提示Classic mode for store/ is deprecated and will be removed in Nuxt 3.
普通模式很容易理解，也不难做，将vue那一套搬过来即可。

4 路由问题
nuxt根据目录自动生成路径，故而不像vue里面还得手工写入

4.1 菜单
例如jjxc-gl-xhy，这里就是目录层级

4.2 页面中跳转
注意/不要少了，因为标识了从那个目录开始

this.$router.push({path:'/mlll/zpf/dm',query:{dg:dg,mz:mz}})

接受参数,这个比较常规

 mounted(){
        this.dg = this.$route.query.dg;
        this.mz = this.$route.query.mz;
    },

5 nuxt的一些问题
5.1 请求一个pending
浏览器中复制三个，就会出现这样的问题，后面怎么都无法

5.2 gyp verb check python checking for Python executable “python2” in the PATH
直接运行npm install --global windows-build-tools不能解决问题，因为安装不了
需要执行npm --vs2015 install --global windows-build-tools,很快就装好了。

PS C:\WINDOWS\system32> npm --vs2015 install --global windows-build-tools
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: Node.js now includes build tools for Windows. You probably no longer need this tool. See https://github.com/felixrieseberg/windows-build-tools for details.

added 103 packages, changed 1 package, and audited 105 packages in 4m

3 packages are looking for funding
  run `npm fund` for details

2 moderate severity vulnerabilities

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

5.3 npm切换版本
nvm-windows
参考node_modules\node-sass: Command failed报错问题处理
NVM For Windows
配置nvm的下载源,在nvm的安装目录中settings.txt文件中添加下面的配置

node_mirror:npm.taobao.org/mirrors/node/
npm_mirror:npm.taobao.org/mirrors/npm/

查看可用的版本,https://registry.npmmirror.com/binary.html?path=node/

出现下面的问题，先更改源，再看可用版本

PS C:\WINDOWS\system32> nvm install 14.6.0
Could not retrieve https://nodejs.org/dist/latest/SHASUMS256.txt.
Get "https://nodejs.org/dist/latest/SHASUMS256.txt": dial tcp 104.20.23.46:443: i/o timeout

切换node版本

nvm ls
nvm use 14.6.0

5.3 yarn 国内源
yarn安装和配置国内源

yarn config set -g registry http://mirrors.cloud.tencent.com/npm/
yarn config set -g sass_binary_site http://mirrors.cloud.tencent.com/npm/node-sass/