vue去掉#打包發布等一系列坑。
阿新 • • 發佈：2018-08-14
char 還需要 ngnix title rect script main light rip
1.去掉#本地運行沒問題很簡單：
只需要在你的路由裏加上
export default new Router({
mode: ‘history‘, //這句就是讓路由轉換成history的代碼
routes: [
{
path: ‘/‘,
name: ‘demo‘,
component: sy
},
})
只要加上這句，你重啟項目就可以沒有#號了，但是並沒有這麽簡單，當你上線後會發現頁面404。
2.vue去掉#上線.
所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html
官網有各種後臺配置的說明，這裏只把ngnix貼出來。
server {
listen 8080;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
#打包後的項目目錄，一定記住這個地方帶有項目名稱
root /Users/a123/Desktop/vue/sgAdmin/yiTownWebApp;
index index.html;
location /yiTownWebApp{
#這個地方沒有項目名稱，因為請求的時候如果請求：http://localhost:8080/yiTownWebApp,nginx會查找/Users/a123/Desktop/vue/sgAdmin/yiTownWebApp
/目錄下的數據
root /Users/a123/Desktop/vue/sgAdmin;
try_files $uri $uri/ @router;
index index.html;
}
//try_files $uri $uri/ @router;和下邊部分很重要，沒有這部分發布二級一下的路由會出現js加載，但是也沒空白的情況
location @router {
rewrite ^.*$ /index.html last;
}
}
後臺配置好以後，你以為好了？頁面應該會從404，變成空白，這個時候我把需要修改的地方我一起貼出來，具體原因就是路由改了history模式以改變一些路徑，不管是路由力度路徑或者打包出來的css，js路徑都有一些問題，然後你還需要搞清楚你上傳的項目是放在服務器根路徑還是不是根路徑，如果是根路徑安裝官網的來應該可以解決，如果根路徑，看下面。
vue項目中config文件下index.js中打包配置
build: {
// Template for index.html
index: path.resolve(__dirname, ‘../yiTownWebApp/index.html‘),
// Paths
assetsRoot: path.resolve(__dirname, ‘../yiTownWebApp‘), //這個是打包後的文件夾
assetsSubDirectory: ‘static‘, //這個是設置打包後文件夾的路徑
assetsPublicPath: ‘/yiTownWebApp/‘,//這個地方使用絕對路徑很重要
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: ‘#source-map‘,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: [‘js‘, ‘css‘],
最後在你的路由裏配置一個base
export default new Router({
mode: ‘history‘, //這句就是讓路由轉換成history的代碼
base: ‘/yiTownWebApp/‘, //這個配置也很重要，否則會出現頁面空白情況
routes: [
{
path: ‘/‘,
name: ‘demo‘,
component: demo
},
})
現在就可以訪問了，但是用了嵌套路由的還是會發現子頁面還是空白，所以主頁面也記得加base
{
path: ‘/2018jbGame‘,
name: ‘jbGame2018‘,
component: jbGame2018,
base: ‘/2018jbGame/‘,
meta: {
title: ‘江北區第八屆運動會‘
},
children: [
{
path: ‘/indexPage‘,
component: IndexPage,
name: ‘IndexPage‘,
meta: {
title: ‘江北區第八屆運動會‘
},
},
}
vue去掉#打包發布等一系列坑。