lv1= lv2= type=

mynote front 部署

E:\xunwu\projects\官网\xunwu\README.md

nuxt <[--

问题：使用 nuxt start，至少要 npm install nuxt 这个很大、很多文件

--]>

nodejs linux 安装 

node-sass 

npm config 

cd --front--install-path--

npm config set registry https://registry.npm.taobao.org

npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/

npm install --user=0

npx nuxt build

npm install -g pm2

不用pm2，启动（production mode）命令为 npx nuxt start，因此，pm2 启动为（-- 后面的参数会传递给 npx 命令）：

pm2 start npx -- nuxt start

pm2 delete npx

linux 脚本 汇总

# 上传 node 安装包、front git 压缩包 到 /root/init

cd /root/init

# 解压 front

# 修改 my.js 配置

-- node 安装

cd /home/www/front

npm config set registry https://registry.npm.taobao.org

npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/

npm install --user=0

npm install -g pm2

npx nuxt build

pm2 start npx -- nuxt start

# 虚拟内存

cd /usr

mkdir swap

cd swap/

dd if=/dev/zero of=/usr/swap/swapfile bs=1M count=2048

mkswap /usr/swap/swapfile

swapon /usr/swap/swapfile

# 设置开机自动启用虚拟内存，在etc/fstab文件中加入如下命令

# 使用vim编辑器打开/etc/fstab文件

echo "/usr/swap/swapfile swap swap defaults 0 0" >> /etc/fstab

windows

〖E:\uninote\deploy-windows〗

mynote front servers

mynote test/dev server 

lv1= lv2= type=

图片等比例缩放 scaleImg

align center 居中 

SHA-1: 2f1374818427b85c70657c4a47e303fcd64ee308

* [feat]: 首页文章缩略图等比例缩放

naturalWidth naturalHeight

load 事件

__uninote_scaled__ 缓存

mode：fill full

container 需要 relative、abs等 position

组件的mounted updated 都需要监听

问题：

通过 ref 拿到组件，但没法追加监听 mounted/updated ?

lv1= lv2= type=

mynote-front my config

因为是嵌套结构，所以用这种方式更方便：

// load custom config

var fs = require("fs");

let path = __dirname + '/nuxt.config.my.js';

if (fs.existsSync(path)) {

    myconfig = require(path);

    myconfig(module.exports);

}

---- nuxt.config.my.js

// 直接修改默认配置

module.exports = function (config) {

  config.proxy["/api"] = "http://uninote.com.cn/";

  // config.proxy["/api"] = "http://localhost:222/";

  config.build.extend = function (config, ctx) {

    config.devtool = 'source-map';

  }

  config.server.port = 80;

}

---- nuxt.config.my.js for test

// 直接修改默认配置

module.exports = function (config) {

  config.proxy["/api"] = "http://dev.rongyipiao.com/";

  config.build.extend = function (config, ctx) {

    config.devtool = 'none';

  }

  config.server.port = 80;

}

---- for test local

// 直接修改默认配置

module.exports = function (config) {

  // config.proxy["/api"] = "http://uninote.com.cn/";

  config.axios.baseURL = config.proxy["/api"] = "http://192.168.0.121/";

  config.build.extend = function (config, ctx) {

    config.devtool = 'source-map';

  }

  config.server.port = 3333;

}

lv1= lv2= type=

mynote front element-ui

Nuxt中ElementUI的使用

https://www.cnblogs.com/shenyf/p/8361049.html

https://blog.csdn.net/Calla_Lj/article/details/86592491

nuxt.config.js

css: [

  'element-ui/lib/theme-chalk/index.css',

  '~/assets/stylus/main.styl'

],

assets/stylus/variable.styl 全局公共变量

element-ui 主题

定制主题 theme 

assets/element-variables.scss element ui 主题修改 

c1ecf1c94d7881e2ea8fc0472d7bbc89dc74574b

lv1= lv2= type=

mynote front kbp

到后台服务器的网络请求监控

http.js:

function request(url, options, cb) {

  return new ClientRequest(url, options, cb);

}

E:\uninote\mynote-front\node_modules\@nuxt\server\dist\server.js

const nuxtMiddleware = ({ options, nuxt, renderRoute, resources }) => async function nuxtMiddleware(req, res, next) {

  // Get context

  const context = utils.getContext(req, res);

  const url = decodeURI(req.url);

  res.statusCode = 200;

  try {

    const result = await renderRoute(url, context);

    await nuxt.callHook('render:route', url, result, context);

/**

 * Dispatch a request

 *

 * @param {Object} config The config specific for this request (merged with this.defaults)

 */

Axios.prototype.request = function request(config) {

  /*eslint no-param-reassign:0*/

  // Allow for axios('example/url'[, config]) a la fetch API

  if (typeof config === 'string') {

    config = utils.merge({

      url: arguments[0]

    }, arguments[1]);

  }

  config = utils.merge(defaults, {method: 'get'}, this.defaults, config);

net.js:

function connect(...args) {

  var normalized = normalizeArgs(args);

  var options = normalized[0];

  debug('createConnection', normalized);

  var socket = new Socket(options);

  if (options.timeout) {

    socket.setTimeout(options.timeout);

  }

  return socket.connect(normalized);

}

ssr时

E:\uninote\mynote-front-test\node_modules\follow-redirects\index.js

      assert.equal(options.protocol, protocol, "protocol mismatch");

      debug("options", options);

      return new RedirectableRequest(options, callback);

    };

E:\uninote\mynote-front\node_modules\follow-redirects\index.js

  // Create the native request

  var request = this._currentRequest =

        nativeProtocol.request(this._options, this._onNativeResponse);

console.log(this._options);

  this._currentUrl = url.format(this._options);

E:\uninote\mynote-front\node_modules\axios\lib\core\Axios.js

Axios.prototype.request = function request(config) {

  /*eslint no-param-reassign:0*/

  // Allow for axios('example/url'[, config]) a la fetch API

  if (typeof config === 'string') {

    config = utils.merge({

      url: arguments[0]

    }, arguments[1]);

  }

非ssr时

E:\uninote\mynote-front-test\node_modules\http-proxy\lib\http-proxy\passes\web-incoming.js

console.log("req:", req.hostname, req.path, "--->", options.hostname);

var proxyReq = (options.target.protocol === 'https:' ? https : http).request(

  common.setupOutgoing(options.ssl || {}, options, req)

);

lv1= lv2= type=

mynote front ssr

mynote front kbp 

nuxt ssr 

E:\uninote\mynote-front-test\node_modules\@nuxtjs\axios\lib\module.js

  // Set _AXIOS_BASE_URL_ for dynamic SSR baseURL

  process.env._AXIOS_BASE_URL_ = options.baseURL

最终被生成到了这里：

E:\uninote\mynote-front-test\.nuxt\axios.js

export default (ctx, inject) => {

  // baseURL

  const baseURL = process.browser

      ? '/'

      : (process.env._AXIOS_BASE_URL_ || 'http://192.168.0.121/')

填坑记录

collin 将 ssr 的代理 baseURL 配置删除了，因此 ssr 代理的 base 由默认值决定。部署的 test1 正常：

axios.js 生成为：

  // baseURL

  const baseURL = process.browser

      ? '/'

      : (process.env._AXIOS_BASE_URL_ || 'http://localhost:80/')

而 test1 front server 正好是在 80 端口，因此此 ssr 代理请求作为普通的请求将再次被代理，此时能正确的拿到结果。

再次部署 test2 就出了问题：

axios.js 生成为（端口变为3000，gogs的端口，原因不得而知）：

  // baseURL

  const baseURL = process.browser

      ? '/'

      : (process.env._AXIOS_BASE_URL_ || 'http://localhost:3000/')

因此代理结果将变为 404。