nuxt 项目代码

389 阅读2分钟

1.nuxt.config.js

/*
 * @Description: 配置文件
 */
const env = require('./env')
module.exports = {
  /*
  ** Headers of the page

  */
  env: {
    imgUrl: env[process.env.MODE].imgUrl,
    socketUrl: env[process.env.MODE].socketUrl,
    // 富文本配置
    ueditorConfig: {
      toolbars: [[
        'fullscreen', 'source', '|', 'undo', 'redo', '|',
        'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
        'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
        'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
        'directionalityltr', 'directionalityrtl', 'indent', '|',
        'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
        'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
        'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
        'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
        'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
        'print', 'preview', 'searchreplace', 'drafts', 'help'
      ]],
      // 编辑器不自动被内容撑高
      autoHeightEnabled: false,
      // 初始容器高度
      initialFrameHeight: 400,
      // 初始容器宽度
      initialFrameWidth: '99%',
      // 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
      // serverUrl: 'http://35.201.165.105:8000/controller.php',
      // UEditor 资源文件存放的根目录,如果你使用的是 vue-cli 3.x,设置为'/UEditor/'(参考下方的常见问题2)
      UEDITOR_HOME_URL: "/UEditor/",
      serverUrl: env[process.env.MODE].externalApiUrl + "/ueditor/config"
    }
  },
  head: {
    title: 'xxx',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'renderer', content: 'webkit' },
      { name: 'force-rendering', content: 'webkit' },
      { 'http-equiv': 'X-UA-Compatible', content: 'IE=Edge,chrome=1' },
      { hid: 'description', name: 'description', content: 'xxx' },
      {
        name: 'xxx',
        content:
          'xxx'
      }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/web_icon.ico' },
      // { rel: 'stylesheet', type: 'text/css', href: 'http://at.alicdn.com/t/font_1846505_itebp5qszy.css'}
    ]
  },
  router: {
    //   middleware: ['authenticated'],
    scrollBehavior(to, from, savedPosition) {
      if (to && from) {
        return { x: 0, y: 0 }
      }
    },
    parseQuery: (querystring) => {
      const QS = require('qs')
      return QS.parse(querystring)
    },
    stringifyQuery: (paramObj) => {
      const QS = require('qs')
      return QS.stringify(paramObj, { addQueryPrefix: true })
    }
  },
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  css: [
    '~/assets/style/theme/index.css',
    '~/assets/style/font/iconfont.css',
    '~/assets/style/index.styl',
  ],
  plugins: [
    // ssr: true表示这个插件只在服务端起作用
    { src: '~/plugins/ElementUI', ssr: true },
    // 全局公共方法
    { src: '~/plugins/common.js' },
    // 全局跳转方法
    { src: '~/plugins/jumpLink.js' },
    // 全局store方法
    { src: '~/plugins/store.js' },
    // 本地储存和cookie
    { src: '~/plugins/vuex-localStorage.js', ssr: false },
    { src: '~/plugins/vuex-cookie.js' },
    // 路由卫士
    { src: '~/plugins/route.js', ssr: false },
    // axios配置
    { src: '~/plugins/axios.js' },
    { src: '~/plugins/axios-api-plugin.js' },
    // 全局验证方法
    { src: '~/plugins/rules.js' },
    // socket.io
    { src: '~/plugins/socket', ssr: false },
    // iconfont
    { src: '~/assets/style/font/iconfont.js', ssr: false },
    { src: '~/plugins/icon.js' },
    // 懒加载
    { src: "~/plugins/vue-lazyload.js", ssr: false },
  ],
  modules: [
    '@nuxtjs/style-resources',
    '@nuxtjs/axios'
  ],
  axios: {
    proxy: true,
    prefix: '/api', // baseURL
    credentials: true,
    baseURL: env[process.env.MODE].apiUrl
  },
  proxy: {
    '/api': {
      target: env[process.env.MODE].apiUrl, // 代理地址
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      },
    },
  },
  styleResources: {
    // 设置css 预处理 全局变量
    stylus: '~/assets/style/public.styl'
    // sass: ... 需要什么配置什么,这里是全局的
  },
  build: {
    /*
    ** Run ESLint on save
    */
    extend(config, ctx) {

      if (ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    },
    // 防止element-ui被多次打包
    vendor: ['element-ui', 'axios', 'vue-lazyload'],
    babel: {
      presets: function ({ isServer }, [preset, options]) {

        const r = [
          [
            preset, {
              buildTarget: isServer ? 'server' : 'client',
              ...options
            }]
          // [ Other presets ]
        ];

        r[0][1].targets = {
          "browsers": ["> 1%", "last 2 versions"],
          ie: 11
        };

        r[0][1].polyfills = [
          'es6.array.iterator',
          'es6.promise',
          'es6.object.assign',
          'es6.symbol',
          'es6.array.find',
          'es6.array.from',
          'es7.promise.finally',
          'es7.object.entries',
        ];

        return r;
      },


      plugins: [
        ['@babel/plugin-transform-runtime']
      ]
    }
  }
}