Vue 前端uni-app多环境配置部署服务器的问题
<blockquote><p>转载请标明出处：<br>
http://dujinyang.blog.csdn.net/<br>
本文出自:【奥特曼超人的博客】</p>
</blockquote>
<p>@</p><div class="toc"><div class="toc-container-header">目录</div><ul><li>前端Vue<ul><li>针对问题</li><li>package.json描述</li><li>多环境部署</li><li>查看源码获取解决方案</li></ul></li></ul></div><p></p>
<h1 id="前端vue">前端Vue</h1>
<p>Vue 经过这一年的进化，模版也是相当丰富了，但在使用多界面时，个人感觉还是有点弊端，CSS的样式问题。</p>
<blockquote>
<p>Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。</p>
</blockquote>
<h2 id="针对问题">针对问题</h2>
<p>多环境部署会引发很多问题，当然，是开发环境下了，这次博主我也引发了这个小问题，从而看到很多人对部署的环境会有疑问，毕竟Vue没有暴漏出像JAVA那样的可配置环境。</p>
<pre><code>SyntaxError: Unexpected token p in JSON
</code></pre>
<ul>
<li>需要区分 开发、QA、预发布、生产等多个环境，如何满足？</li>
<li>怎么部署到服务器上自动判断呢？</li>
</ul>
<p>对Uni-app 的使用也是这段时间好奇才去看了看，当然，并不是去看使用，而是好奇整个架构模版的生成，还是使用HBUILDER去开发，所以我们得注意两件事情：</p>
<ol>
<li><strong>Vue 只关注视图层</strong> ， 采用自底向上增量开发的设计。</li>
<li>Vue API 实现了数据绑定和视图组件，所以，很多人用 <code>npm install</code> 后都会出现<strong>package的系列问题</strong>。</li>
</ol>
<h2 id="packagejson描述">package.json描述</h2>
<p>不管你安装说明组件或模版，总是会看到目录下 <code>package.json</code>，那这个文件是做什么用的呢？其实这个文件相当于 <code>config</code> ，所以你得注意 <code>dist</code> 或 <code>lib</code> 。</p>
<h2 id="多环境部署">多环境部署</h2>
<p>很多人想要像AS或Gradle一样去描述配置环境，类似下面这种伪判断：</p>
<pre><code>区分 开发、QA、预发布、生产等多个环境
if (process.env.ENV === 'development') {
}
if (process.env.ENV === 'QA') {
}
if (process.env.ENV === 'pre-release') {
}
if (process.env.ENV === 'production') {
}
</code></pre>
<p>会报错？来看看源码到底是为何……</p>
<h2 id="查看源码获取解决方案">查看源码获取解决方案</h2>
<p>来看下源码，path路径读取的Key是path ，所以：</p>
<pre><code>const path = require('path')
</code></pre>
<p>其它可以忽略，重要的是下面这段：</p>
<pre><code>module.exports = function (content) {
if (process.env.UNI_USING_COMPONENTS || process.env.UNI_PLATFORM === 'h5') {
return require('./index-new').call(this, content)
}
this.cacheable && this.cacheable()
const manifestJsonPath = path.resolve(process.env.UNI_INPUT_DIR, 'manifest.json')
const manifestJson = parseManifestJson(fs.readFileSync(manifestJsonPath, 'utf8'))
this.addDependency(manifestJsonPath)
const pagesJson = parsePagesJson(content)
if (manifestJson.transformPx === false) {
process.UNI_TRANSFORM_PX = false
} else {
process.UNI_TRANSFORM_PX = true
}
if (process.env.UNI_PLATFORM === 'h5') {
return require('./platforms/h5')(pagesJson, manifestJson)
}
const changedEmitFiles = []
function checkPageEmitFile (pagePath, pageStyle) {
checkEmitFile(pagePath, parseStyle(pageStyle), changedEmitFiles)
}
parsePages(pagesJson, function (page) {
checkPageEmitFile(page.path, page.style)
}, function (root, page) {
checkPageEmitFile(normalizePath(path.join(root, page.path)), page.style)
})
const jsonFiles = require('./platforms/' + process.env.UNI_PLATFORM)(pagesJson, manifestJson)
if (jsonFiles && jsonFiles.length) {
jsonFiles.forEach(jsonFile => {
jsonFile && checkEmitFile(jsonFile.name, jsonFile.content, changedEmitFiles)
})
}
changedEmitFiles.forEach(name => {
this.emitFile(name + '.json', emitFileCaches)
})
return ''
}
</code></pre>
<p>有点多，抽取一下：</p>
<pre><code>if (manifestJson.transformPx === false) {
process.UNI_TRANSFORM_PX = false
} else {
process.UNI_TRANSFORM_PX = true
}
if (process.env.UNI_PLATFORM === 'h5') {
return require('./platforms/h5')(pagesJson, manifestJson)
}
</code></pre>
<p>其它代码太多，暂时不贴了，大致意义就是解析package.json后，再去读取H5的manifest配置，所以最后发现，是manifest配置有问题，查找是多了 pubilcPath，去掉后，<code>SyntaxError: Unexpected token p</code>错误也就消失了。</p>
<p>因为当代路径就在目录下了，所以打包的时候会引入了config，那自己只需要再分开一份配置文件即可。</p>
<p>这样就解决了，当然也可以安装个<code>cross-env</code> ，安装代码：</p>
<pre><code>npm install --save-dev cross-env
</code></pre>
<p>这样的话，我们可以定义：</p>
<pre><code>"build": "cross-env BUILD_ENV=production node build/build.js",
"QA": "cross-env BUILD_ENV=QA node build/build.js",
"TEST": "cross-env BUILD_ENV=TEST node build/build.js"
</code></pre>
<p>这样就不需要另外分开一份配置了，当然，可以把当前的<code>BUILD_ENV</code>设置到环境变量中，如果不是常用不建议设置。</p>
<p>语法：</p>
<pre><code>cross-env xxx=xxx node build/build.js
</code></pre>
<p>那么最终的代码：</p>
<pre><code> let ENV = process.env.BUILD_ENV;
if (ENV == 'production') {
// 生产环境
} else if (ENV == 'QA') {
// 测试环境
}else if(ENV== 'TEST'){
// 开发测试
}
</code></pre>
<p>也可以自己去定义个全局变量使用，或者修改index下的源码，那样比较麻烦，小编我是修改了，不过 <strong>所有的项目都能用特定的字段去使用了。</strong></p>
<ul>
<li>KARL-Dujinyang .link.</li>
</ul>
<hr>
<p>|| 版权声明：本文为博主杜锦阳原创文章，转载请注明出处。</p>
<hr>
<p>作者：奥特曼超人Dujinyang</p>
<p>来源：CSDN</p>
<p>原文：https://dujinyang.blog.csdn.net/</p>
<p>版权声明：本文为博主原创文章，转载请附上博文链接！</p><br><br>
来源：https://www.cnblogs.com/python2048/p/11519831.html
頁:
[1]