vue項目進行nuxt改造

背景

原項目是使用vue-cli建立的vue項目。嘗試引入ssr。直接上nuxt框架進行改造，本文作了一些改造記錄

記錄

一、vue-amap插件，直接在頁面組件裏 use的，未經過 plugins 配置，可行

二、mint-ui插件，須要 配置。

//plugins/mint-ui.js文件

//nuxt.config.js

module.exports = { plugins: ['~plugins/mint-ui.js'] }

plugins 屬性配置

類型： Array
數組元素類型： String 或 Object
若是數組元素類型是 Object， 其具備如下屬性：

src: String (文件的路徑)
ssr: Boolean (默認爲 true) 若是值爲 false，該文件只會在客戶端被打包引入。    若是設置爲false，則加載不到該插件的樣式，即 服務端須要加載 存在。
plugins 屬性 的配置項，會在應用初始化以前加載導入    能夠建一個common.js 導入 已有main.js 的初始內容

三、引入 lib-flexible：使用plugins配置的套路，導入它。並進行build配置，

四、多頁應用轉換及默認頁：

目錄結構以下：

 

訪問：/home 能訪問到index；/home/swiper能訪問到 swiper

五、使用less

npm i less less-loader -D 便可

六、全局樣式文件

//nuxt.config.js

css:[
'@/assets/css/common.less'
],

七、引入依賴收集插件：webpack-bundle-analyzer

//nuxt.config.js文件

const BundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports={
    build:{
        plugins:[
            new BundleAnalyzerPlugin()
        ]
    }
｝

npm run build --report

八、vue-html5-editor 插件引入：失敗， 待解決

記錄：
nuxt使用的vue核心包 是運行時版本。vue-html5-editor 沒有ssr 版本的js文件。它在掛載時就用到了客戶端的東西 如 innerHTML；所以不能夠在 服務端 加載，只能在客戶端進行。可是客戶端 它用的是 模板渲染，而不是 運行時渲染。所以各類報錯。

建議使用：vue-quill-editor
參考連接：https://blog.csdn.net/weixin_36185028/article/details/82946453

九、axios數據請求：

nuxt自己集成了axios，所以可使用集成，也能夠單獨引入。

A、集成的方式：

A一、首先須要在配置文件nuxt.config.js中配置axios項

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/bulma'
],
  /* 須要使用 aixos必須配置如下兩項axios和proxy*/
  axios: {
    prefix: '/api/',
    proxy: true
},

proxy: {
    '/api/': {
      target: 'https://maoyan.com/',
      pathRewrite: {
        '^/api/': ''
      }
    }
 },

A二、在組件中使用axios， 無需在import引入, 直接使用this.$axios便可

// 這裏引入context是上下文參數，代替了this，
// 由於在asyncData方法是在組件初始化時調用，因此無法經過this來引用組件實例對象。
asyncData(context) {
    return context.$axios.get('ajax/cities')
      .then(res => {
        console.log(res)
      })
  }

B、單獨引入（即 本例改造的場景）

npm install axios --save
異步數據在 asyncData 方法裏寫（限於頁面組件），每次加載以前都會調用。這裏沒法調用this示例。nuxt是經過 方法返回的對象與 vue data實例 匹配渲染的。

B一、跨域解決：
npm i @gauseen/nuxt-proxy -D

// nuxt.config.js

modules: [
    // 請求代理配置，解決跨域
    '@gauseen/nuxt-proxy',
],
proxyTable:{
    '/api':{
        target:'http://bayin666.mycwgs.com',//設置你調用的接口域名和端口號別忘了加http
        changeOrigin:true,
        pathRewrite:{
            '^/api':''
        }
    }
}