1、部署cdn
nuxt build 后的前端资源都会存放在.nuxt/dist/ 文件夹下面
img 目录存放的是使用到的图片资源,无论是开发中存放在 assets 文件夹里的,还是static里的,都会统一生成到该目录里
layouts 目录存放是layout 的布局js
pages 目录存放的是路由页面的js
其他的文件为nuxt创建的一些公共库和配置文件
所以部署cdn的时候,只要将 dist 文件夹推送到cdn服务器就行了
然后下一步更改 publicPath ,这样子在nuxt build 的时候,静态资源就会自动初始化到publicPath 路径下
修改nuxt.config.js,在build 加上 publicPath配置。注意的是后面的
注意,路径后面的‘/’ 不能忽略,假如忽略了之后,publicPath: ‘http://cdn.modb.pro/_nuxt’,js会路径会正常,但是img路径不正常
build: { publicPath: process.env.PATH_TYPE === ‘gray‘ ? ‘/_nuxt/‘ : ‘https://cdn.modb.pro/_nuxt/‘, parallel: true, transpile: [/^element-ui/], /* ** You can extend webpack config here */ extend (config, ctx) { }, filenames: { chunk: ‘modb.2.6.[id].js‘ } }
2、区分发布环境
在 Nuxt.js 项目中,我们有一个全局的环境变量 process.env.NODE_ENV,默认情况下,这个变量的值要么是 production,要么是 development,分别表示生产环境和开发环境。而我们需要的环境可能不止这两种,我们还需要测试环境、预生产环境等等
现在就是我的测试环境不加cdn,生产环境需要加cdn,那么就需要设置一下全局环境变量
利用cross-env
"scripts": { "dev": "nuxt", "gray": "cross-env PATH_TYPE=gray nuxt build", "build": "cross-env PATH_TYPE=production nuxt build", "start": "nuxt start", "generate": "nuxt generate" },
nuxt.config.js里加入
env: { PATH_TYPE: process.env.PATH_TYPE },
利用环境变量区分
publicPath: process.env.PATH_TYPE === ‘gray‘ ? ‘/_nuxt/‘ : ‘https://cdn.modb.pro/_nuxt/‘,
原文地址:https://www.cnblogs.com/goloving/p/11731496.html
时间: 2024-11-10 15:34:49