ctm-1.9.0
<p>[TOC]</p>
<h2>改动</h2>
<p>增加env环境判断</p>
<h2>安装</h2>
<p><strong>vue-cli 2</strong></p>
<pre><code>vue init ct-team/vue</code></pre>
<p><strong>vue-cli 3</strong></p>
<pre><code>//全局安装兼容插件
npm -g install @vue/cli-init
vue init ct-team/vue demo</code></pre>
<h2>支持</h2>
<p>vux less sass autoprefixer px2rem 图片压缩 env环境判断</p>
<h2>目录说明</h2>
<pre><code> ├── build 构建脚本目录
├── config 项目配置
├── build-user 前端自定义构建目录
│ └── config.js 前端配置文件【手动配置】
├── dist 打包后文件
│ ├── 80-static 正式版
│ ├── 1505-stable 1505
│ ├── 1506-develop 1506
│ ├── 1507-test 1507
│ ├── 2505-pre 2505
│ ├── assets 资源文件
│ └── dest 初始版
└── src 项目源码目录
└── view 页面入口
└──index 页面文件夹（根据你的页面数量 来进行创建）
├── index.ejs 页面模板
├── main.js 入口js文件
└── app.vue
</code></pre>
<h2>图片引用</h2>
<p>在页面上不能使用<code><img src="xxx.jpg"></code>的方式 请使用下面的形式</p>
<pre><code>配置 user-build/config.js
chunk:true
组件内
<img :src="loading">
import loading from '@/assets/img/loading.gif';
export default {
data() {
return {
loading:loading
}
}
}</code></pre>
<h2>配置</h2>
<p>配置文件为build-user/config.js</p>
<pre><code>chunk: true, //是否开启动态chunk 默认true 开启后 页面上会出现 var configBaseUrl = '<configBaseUrl>';
assetsPublicPath: './', // 只能为 ‘/’ 或 ‘./’
baseUrl: '//static.tcy365[webport]', //项目资源根目录 [webport] 后缀标识符 默认不修改
appUrl: '/', //项目路径 如 /mobile/test/
px2rem: { rootValue: 100 },//px2rem 转换内容 如 { rootValue: 100 } 非rem项目 使用null
list: [
{ title: '1505-stable', webPort: '.org:1505',env:1506 },
{ title: '1507-test', webPort: '.org:1507',env:1507 },
{ title: '1506-develop', webPort: '.org:1506',env:1506 },
{ title: '2505-pre', webPort: '.com:2505',env:2505 },
{ title: '80-static', webPort: '.com',env:80 }
],
proxy: {
'/api': {//印射为/api
target: 'http://yapi.tcy365.org:3000/mock/123/', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '/api' //需要rewrite的,
}
}
},
host: 'localhost', // 测试版host
port: 1506 // 测试版端口号</code></pre>
<h2>环境判断</h2>
<p>使用 <code>data-hide-env="$env"</code>的形式来不输出相关环境的内容，可使用多个配置。</p>
<pre><code>//80环境不渲染 vconsole 文件
<div data-hide-env="80">
<script type="text/javascript" src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/2.5.1/vconsole.min.js"></script>
</div>
//80 与 2505环境不渲染 vconsole 文件
<div data-hide-env="80" data-hide-env="2505">
<script type="text/javascript" src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/2.5.1/vconsole.min.js"></script>
</div></code></pre>
<h2>注意点</h2>
<p><strong>node-sass 错误</strong>
<img src="http://doc.uc108.org:8002/Public/Uploads/2018-06-07/5b18beb305a0c.png" alt="" /></p>
<p>解决办法，运行：<code>npm rebuild node-sass</code></p>