## 一、配置好proxyTable代理，需要重啟下項目，不然不生效 config/index.js 在開發(dev)配置下添加如下 ~~~ proxyTable: { '/api': { target: 'http://xxx.com/api', changeOrigin: true, //是否跨域 pathRewrite: { // '^/api': '/api' //需要rewrite重寫的, } } }, ~~~ 配置方式：https://www.cnblogs.com/congxueda/p/7087144.html 如果配置沒有生效，可以重啟下服務看下 ## 二、修改build后的路徑 config/index.js -> build ~~~ assetsPublicPath: './', ~~~ ## 三、禁止在瀏覽器自動打開 config/index.js -> dev ~~~ autoOpenBrowser: false, ~~~ ## 四、vue-router使用history模式，build后在apache服務器訪問 首先配置個虛擬主機，如www.test.com 目錄指向網站根目錄中的build后的項目，然后新建個.htaccess文件，內容如下， ~~~ <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule> ~~~   最后訪問 www.test.com 就可以了  >注意： 配置完虛擬主機后proxyTable就無效了 ## 五、script text/template模板里不能使用v-for ~~~ <script type="text/template"> <ul> <li v-for="item in data"> {{ item.name }} </li> </ul> </script> ~~~ 這樣會報item是undefined，，解決方案，把script text/template換成div容器 如果要獲取更新后的html ~~~ vm.$nextTick(function() { console.log($('#js_flight').html()); }); ~~~ ## 六、如果不想雙向綁定可以這樣 ~~~ <div id="js_app"> <input v-model="filterUser.name" /> {{ user.name }} </div> <script> new Vue({ el: '#js_app', data: { user: { name: 'zhangsan' } }, computed: { filterUser: function() { return JSON.parse(JSON.stringify(this.user)); } } }); ~~~ ## 七、在數據沒有錯誤的情況下，如果遇到sort不更新的話，就嘗試下加個key屬性 ~~~ <ul> <li v-for="item in list" :key="item.id">{{ item.sort }} {{ item.name }}</li> </ul> ~~~ ## 八、如果遇到key是undefined，那么整個vue會掛掉，這里只要在Kt函數里多加個判斷，判斷r是存在的 > function Kt(r,i){return r&&r.key===i.key&&(r.tag===i.tag&&r.isComment===i.isComment&&t(r.data) ## 九、build時去掉.map config/index.js ~~~ productionSourceMap: false ~~~ ## 十、nginx 服務器部署 下載 nginx for window 下載地址：http://nginx.org/en/download.html  到安裝目錄下啟動 nginx E:\nginx-1.14.0 ~~~ start nginx ~~~ 訪問 localhost 就可以看到默認的頁面了。 下面我們把 vue build 的目錄放到 E:\nginx-1.14.0\html下，然后修改配置文件 ~~~ location / { try_files $uri $uri/ /index.html; root html/dist; index index.html index.htm; } location /api { proxy_pass http://xxx/api; # 最好使用一個公共的path #rewrite '/api' '/' #add_header?'Access-Control-Allow-Origin'?'\*'; ????#add_header?'Access-Control-Allow-Methods'?'GET,?POST,?OPTIONS'; #proxy_set_header Host $host; #proxy_set_header X-Real-IP $remote_addr; #proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } ~~~ 重啟 nginx ~~~ nginx.exe -s reload ~~~ 刷新瀏覽器就可以看到項目頁面了。 查看 nginx 命令 ~~~ nginx -h ~~~  注意：如果Nginx報錯，就看下本地啟動的服務端口號與Nginx配置的各項服務端口號是否有沖突 ## 十、解決背景圖片路徑不對的問題 在 build/utils.js里搜索ExtractTextPlugin，然后添加publicPath: '../../' ~~~ if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } ~~~ ## 十一、刷新頁面 **方式1：** ~~~ this.$router.go(0); ~~~ **方式2：** ``` location.reload(); ``` **方式3：** 使用provide 和 inject 以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在起上下游關系成立的時間里始終生效。 App.vue ``` <template> <div> <router-view v-if="isRouterAlive"></router-view> </div> <template> <script> export default { data() { return { isRouterAlive: true } }, provide() { return { reload: this.reload } }, methods: { reload() { this.isRouterAlive = false; this.$nextTick(()=>{ this.isRouterAlive = true; }); } } } </script> ``` Home.vue ``` <template> <div> {{ timestamp }} <button type="button" @click="refresh">刷新頁面</button> </div> </template> <script> export default { name: 'home', data() { return { timestamp: Date.now() } }, inject: ['reload'], methods: { refresh() { this.reload(); } } } </script> ``` 注意：方式1和方式2刷新頁面體驗不是很好，如果網速不夠快的話，會有一瞬間的白屏 ## 十二、兼容IE ~~~ npm install babel-polyfill --save-dev ~~~ 然后在webpack.base.conf.js里，改下入口配置，如下 ~~~ entry: { 'babel-polyfill': 'babel-polyfill', app: './src/main.js' } ~~~ ## 十三、vue-router 3.x懶加載 官方推薦：https://router.vuejs.org/guide/advanced/lazy-loading.html#grouping-components-in-the-same-chunk ~~~ let Login = ()=>import('@pages/login/index') ~~~ 其它方式： ~~~ let Login = resolve=>require(['@/pageslogin/index'], resolve) ~~~ 如果build后，跳轉頁面沒有內容，可能沒找到文件，這時可以看下 config/index.js下的build的路徑配置，確保assetsPublicPath為根目錄 ~~~ build: { // ... assetsPublicPath: '/' ~~~ ## 十四、如遇到JSON.stringify編譯報錯，可以改成window.JSON.stringify試下 ## 十五、如果vendor打包文件過大，可以試著拆分，通過cdn引入，如果還想能過import導入使用，可以在webpack.base.conf.js里加上externals配置 https://webpack.js.org/configuration/externals/#src/components/Sidebar/Sidebar.jsx ~~~ entry: {}, output: {}, externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'axios': 'axios', 'element-ui': 'ElementUI' } ~~~ ## 十六、gzip壓縮chunked傳輸nginx配置 ~~~ http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #開啟gzip gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_comp_level 2; gzip_types text/css application/javascript image/jpeg image/gif image/png; gzip_vary on; gzip_disable "MSIE [1-6]\."; server { listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { try_files $uri $uri/ /index.html; root html/dist; index index.html index.htm; chunked_transfer_encoding on; // 開啟chunk } # 緩存js、css location ~ .*\.(js|css)?$ { expires 1h; } location /test { proxy_pass http://www.xxx.com/test; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } #... ~~~ ## 十七、nginx修改上傳文件大小，在http下添加client_max_body_size配置就行了，說明下如： ~~~ Syntax: client_max_body_size size; Default: client_max_body_size 1m; Context: http, server, location ~~~ ## 十八、單頁內路由跳轉 1、路由模式使用hash，或者不設，因為默認mode就是hash ## 十九、如果遇到key是未定義的，這時可能是因為在綁定key的時候有重復，可以針對改下ke?y