如何在nuxt中引入px2rem,并且只在某个组件内调用

发布网友

共2个回答

懂视网

// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
 var options = proxyTable[context]
 if (typeof options === 'string') {
 options = { target: options }
 }
 app.use(proxyMiddleware(options.filter || context, options))
})

这里是采用的express中间件的形式，使用的依赖是http-proxy-middleware
nuxt也有中间件的概念，不过这个中间件不是express的中间件，那么我们怎么添加到nuxt里面去呢？

怎么做

首先，安装依赖

npm install --save-dev express http-proxy-middleware

然后在根目录创建一个文件server.js

const { Nuxt, Builder } = require('nuxt')
const app = require('express')()
var proxyMiddleware = require('http-proxy-middleware')
var config = require('./nuxt.config')
// 我们用这些选项初始化 Nuxt.js：
const isProd = process.env.NODE_ENV === 'production'
const nuxt = new Nuxt({ dev: !isProd })
// 生产模式不需要 build
if (!isProd) {
 const builder = new Builder(nuxt)
 builder.build()
}

// proxy api requests这里就是添加的proxyTable中间价的设置了
var proxyTable = config.dev.proxyTable
Object.keys(proxyTable).forEach(function (context) {
 var options = proxyTable[context]
 if (typeof options === 'string') {
 options = { target: options }
 }
 app.use(proxyMiddleware(options.filter || context, options))
 })
app.use(nuxt.render)//这里是添加nuxt渲染层服务的中间件



app.listen(3000)
console.log('Server is listening on http://localhost:3000')

然后在nuxt.config.js中添加如下代码

module.exports = {
 dev: {
 proxyTable: {
  '/api':
  {
  target: 'http://localhost:7001', // 
  pathRewrite: { '^/api': '/' }
  }
 }
 }
}

然后node server.js运行就可以了。
觉得运行不方便还可以把命令添加到package.json文件里。

{
 "scripts": {
 "dev": "nuxt --port=8080",
 "build": "nuxt build",
 "start": "nuxt start",
 "generate": "nuxt generate",
 "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
 "precommit": "npm run lint",
 "server": "node server.js"
 }
}

热心网友

Step1：导入rem计算公式；
1. 创建：
在src目录下创建config文件夹并在目录下创建rem.js文件写入如下代码；
(function(){function a(){var b=document.documentElement.clientWidth;b=b>750?750:b;var c=b/750*100;document.getElementsByTagName("html")[0].style.fontSize=c+"px"}a();window.onresize=a})();

2. 引入：
在src\main.js中导入之前创建的js文件；
import './config/rem.js'

Step2：安装并设置px2rem插件；
1. 安装：
$ cnpm install px2rem-loader

2. 设置：
在项目中找到build\utils.js，定位至function generateLoaders在其上方定义如下：
var px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 50 /* 此处50为可调整的值 */
}
} // 以上的添加的px2rem的定义
// 在下方generateLoaders方法中添加[cssLoader,px2remLoader]

// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader] /* 此处为添加的定义 */

备注：remUnit: 50 /* 此处50为可调整的值 */此处50由设计稿尺寸决定（eg：当设计稿为375时，打开网页进入调试模式将网页宽度调整至与设计稿相同，得到的html的font-size即为需要设置的值）
<html style="font-size: 50px;">

1540711565379.png
Step3：使用px2rem插件；
1. 使用：
直接设置css样式使用px单位即可，如果不需要自动转换则在其后面加上/*no*/
<style scoped>
.detail-page { width: 20px; height: 40px; /*no*/
}</style>

作者：起个名字那么难吗
链接：https://www.jianshu.com/p/3c096e268e9f
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

全部栏目

如何在nuxt中引入px2rem,并且只在某个组件内调用

怎么做