uni-app整合nuxt

创建uni-app移动端项目 使用uni-cli下载

vue create -p dcloudio/uni-preset-vue my-project

下载 Nuxt 框架 ,无需使用 create-nuxt-app. 脚手架

yarn add nuxt

配置 package.json 文件

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  }
}

配置 nuxt.config.js 文件

import {
	resolve
} from 'path'

export default {
	srcDir: 'src/',
	head: {
		title: 'project 项目名称',
		meta: [{
				charset: 'utf-8'
			},
			{
				name: 'viewport',
				content: 'width=device-width, initial-scale=1'
			}
		],
		//以link的方式使用外部资源文件  浏览器icon
		link: [{
				rel: 'icon',
				type: 'image/x-icon',
				href: './favicon.ico'
			} // 默认路径为/favicon.ico 如果不是在根目录下部署。将此处路径改为.favicon.ico即可
		],
		// 使用外部资源文件，自动生成 script 标签
		script: []
	},
	/*
	 ** Customize the progress-bar color
	 */
	// 进行ajax请求时顶部进度条的颜色
	/*
	 ** Global CSS
	 */
	// 全局样式导入  具体路径自定义
	// 引入公共scss
	styleResources: {
		scss: ['~/uni.scss']
	},
	css: [],
	loaders: {
		imgUrl: {
			limit: 10000
		}
	},
	/*
	 ** Plugins to load before mounting the App
	 ** https://nuxtjs.org/guide/plugins
	 */
	plugins: [],
	/*
	 ** Auto import components
	 ** See https://nuxtjs.org/api/configuration-components
	 */
	components: true,
	/*
	 ** Nuxt.js dev-modules
	 */
	buildModules: [],
	/*
	 ** Nuxt.js modules
	 */
	// nuxt 模块扩展
	modules: [],
	/*
	 ** Axios module configuration
	 ** See https://axios.nuxtjs.org/options
	 */
	// axios: {
	//   // 超时设置
	//   timeout: 10000,
	//   retry: { retries: 3 }
	// },
	/*
	 ** Build configuration
	 ** See https://nuxtjs.org/api/configuration-build/
	 */
	build: {
		extend(config, {
			isDev,
			isClient
		}) {
			if (isDev && isClient) {
				config.module.rules.push({
					enforce: 'pre',
					test: /\.(js|vue)$/,
					loader: 'eslint-loader',
					exclude: /(node_modules)/
				})
			}
		},
		postcss: {
			plugins: {},
			preset: {
				autoprefixer: true
			},
		},
	},
	server: {
		host: '127.0.0.1',
		port: 3100
	},
	env: {
		npm_package_name: 'project 项目名称'
	}
}

运行项目发现会报错误 postcss 错误，需要重新配置一下 postcss.config.js ,需要依赖 nuxt-start、cross-env、css-loader
 

yarn add nuxt-start cross-env css-loader

配置 postcss.config.js

postcss 文件需要做 nuxt 与 uni-app 兼容处理

const path = require('path')
// nuxt兼容
if (process.env.VUE_APP_IS_NUXT) {
	module.exports = {
		plugins: {}
	}
} else {
    // uni-app原有
	module.exports = {
		parser: require('postcss-comment'),
		plugins: [
			require('postcss-import')({
				resolve(id, basedir, importOptions) {
					if (id.startsWith('~@/')) {
						return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
					} else if (id.startsWith('@/')) {
						return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
					} else if (id.startsWith('/') && !id.startsWith('//')) {
						return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
					}
					return id
				}
			}),
			require('autoprefixer')({
				remove: process.env.UNI_PLATFORM !== 'h5'
			}),
			require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
		]
	}
}

新package.json文件：

{
  "name": "my-app",
  "scripts": {
    "dev": "cross-env VUE_APP_IS_NUXT=true nuxt",
	"prd": "cross-env VUE_APP_IS_NUXT=true nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  }
}

运行 yarn dev 会遇到store报错如下：

nuxt报错：[nuxt] store/index.js should export a method that returns a Vuex instance.

store/index.js代码如下：

// 入口文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    authenticated: 'a'
  }
})
export default store

只要将上方的store写法改一下就好了：（即js应该导出一个返回Vuex实例的方法。）

// 入口文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const store = () => new Vuex.Store({
  state: {
    authenticated: 'a'
  }
})
export default store

运行 yarn dev 即可

移动端布局适配 postcss-px-to-viewport（兼容vant）

1. 我们先把它安装到项目的开发环境中：

 npm i postcss-px-to-viewport -D

1. 在项目根目录下添加.postcssrc.js文件
2. 添加如下配置：

module.exports = {
  plugins: {
    autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 要转化的单位
      viewportWidth: 750, // UI设计稿的宽度
      unitPrecision: 6, // 转换后的精度，即小数点位数
      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      landscape: false // 是否处理横屏情况
    }
  }
};