1 nuxt.config.js
const env = require('./env');
let remove_console = []
if (process.env.NODE_ENV === 'production') {
remove_console.push("transform-remove-console")
}
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
mode: 'universal',
head: {
title: 'qq',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
'element-ui/lib/theme-chalk/index.css',
'@/assets/scss/index.scss'
],
styleResources: {
scss: ['@/assets/scss/variable.scss']
},
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
{src:'@/plugins/element-ui',ssr:true},
{src:'@/plugins/el-drag-dialog',ssr:false}
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
'@nuxtjs/style-resources',
'@nuxtjs/proxy'
],
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
transpile: [/^element-ui/],
},
proxy:{
'/bdo/':{
target: 'http://localhost:8352/', // development
changeOrigin: true, //是否跨域
pathRewrite: {
'^/bdo/': '/'
},
},
'/fay/':{
target: 'http://localhost:8351/', // development
changeOrigin: true, //是否跨域
pathRewrite: {
'^/fay/': '/'
},
}
}
}
这里引用了一些组件
yarn add @nuxtjs/axios
yarn add @nuxtjs/style-resources@1.0.0
yarn add node-sass@4.14.1 --dev
yarn add sass-loader@10.1.1 --dev
2 布局
nuxt
中layouts
目录是放布局的
3 nuxt store
启动的时候提示Classic mode for store/ is deprecated and will be removed in Nuxt 3.
普通模式很容易理解,也不难做,将vue那一套搬过来即可。
4 路由问题
nuxt根据目录自动生成路径,故而不像vue里面还得手工写入
4.1 菜单
例如jjxc-gl-xhy
,这里就是目录层级
{{item.title}}
{{item.title}}
登录
注册
4.2 页面中跳转
注意/
不要少了,因为标识了从那个目录开始
this.$router.push({path:'/mlll/zpf/dm',query:{dg:dg,mz:mz}})
接受参数,这个比较常规
mounted(){
this.dg = this.$route.query.dg;
this.mz = this.$route.query.mz;
},
5 nuxt的一些问题
5.1 请求一个pending
浏览器中复制三个,就会出现这样的问题,后面怎么都无法
5.2 gyp verb check python checking for Python executable “python2” in the PATH
直接运行npm install --global windows-build-tools
不能解决问题,因为安装不了
需要执行npm --vs2015 install --global windows-build-tools
,很快就装好了。
PS C:\WINDOWS\system32> npm --vs2015 install --global windows-build-tools
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: Node.js now includes build tools for Windows. You probably no longer need this tool. See https://github.com/felixrieseberg/windows-build-tools for details.
added 103 packages, changed 1 package, and audited 105 packages in 4m
3 packages are looking for funding
run `npm fund` for details
2 moderate severity vulnerabilities
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
5.3 npm切换版本
nvm-windows
参考node_modules\node-sass: Command failed报错问题处理
NVM For Windows
配置nvm的下载源,在nvm
的安装目录中settings.txt
文件中添加下面的配置
node_mirror:npm.taobao.org/mirrors/node/
npm_mirror:npm.taobao.org/mirrors/npm/
查看可用的版本,https://registry.npmmirror.com/binary.html?path=node/
出现下面的问题,先更改源,再看可用版本
PS C:\WINDOWS\system32> nvm install 14.6.0
Could not retrieve https://nodejs.org/dist/latest/SHASUMS256.txt.
Get "https://nodejs.org/dist/latest/SHASUMS256.txt": dial tcp 104.20.23.46:443: i/o timeout
切换node版本
nvm ls
nvm use 14.6.0
5.3 yarn 国内源
yarn安装和配置国内源
yarn config set -g registry http://mirrors.cloud.tencent.com/npm/
yarn config set -g sass_binary_site http://mirrors.cloud.tencent.com/npm/node-sass/